2016-07-07 8 views
0

私がしようとしているのは、ユーザーが都市を選択すると、デフォルトでマイルが入力され、郵便番号は空白のままになります。選択した値に基づいてデフォルト値を設定する

以下はコードIであり、表示されるリストに基づいて都市を選択することができます。私はまた、郵便番号とマイルとそれらが生成される方法を提供しました。

<div class="form-group"> 
    <select class="form-control" id="city" 
      ng-model="searchParam.City" 
      ng-options="City.value for City in Cities"> 
     <option disabled="disabled" selected="selected" value="">City</option> 
    </select> 
</div> 

<div class="row"> 
    <div class="col-xs-7 no-padding-right"> 
    <div class="form-group"> 
     <div class="input-group"> 
     <select class="form-control" name="distance" 
     ng-model="searchParam.Distance" 
     ng-options="mile.value for mile in miles"></select> 
     <div class="input-group-addon">miles</div> 
     </div> 
    </div> 
    </div> 

    <div class="col-xs-5 no-padding-left"> 
    <div class="form-group"> 
     <input allow-pattern="[\d\W]" class="form-control" 
      id="zip" maxlength="5" ng-model="searchParam.Zip" 
      placeholder="Zip code" type="text" /> 
    </div> 
    </div> 
</div> 

私は理解しています何で次の操作を実行しようとしています:

<script> 
    function citySelected(){ 
     if(searchParam.City.selected){ 
      not sure how to set miles to default 
      not sure how to say leave zip code blank 
     } 
    } 
</script> 
+0

あなたはJavaScriptに新しく、あなたが角度のJSを使用しています! –

+0

あなたが開示していないAngularJSを使用しているコードの外観。あなたの質問に適切なタグを付けて、外部の図書館に知らせて、誰かがあなたを助けてくれるようにすることが重要です。 – Jim

+0

@ AL-zami私が言ったように、私はJavascriptでそれを書こうとしています。これを書いた以前の人は角度があります、あなたは正しいです –

答えて

0

あなたが知っている、あなたがangularjsを使用していること?

は、お使いのモデルのために、あなたはあなたのangularJSの実装を見ることができません。この

module.exports = function($scope) { 
    var default = '50'; 
    $scope.Distance = default; 
    $scope.Zip = ''; 
}; 

のようなコントローラを必要としています。コピーして貼り付けましたか?もしあなたが基礎を持っていれば、これはあなたを助けてくれました。

+0

都市が選択されたかどうかを判断し、 –

+0

AngularJS *を使用すると、あなたのモデル(ウェブページ上で使用している動的データ)を扱うことができます。私は実際にあなたの背景知識が分からないので、JSに入るために私は個人的には純粋なJSを使用しようとしていますが、角度のHTML属性は使用しません。あなたがAngularにいたら、もっと深く掘り下げてみてください。とにかく、Angular Docsのチュートリアルや例をいくつか実行して、JSやAngularの基本(例:w3schoolsウェブサイト)に入ります。 *)Angularはフロントエンドフレームワークの1つで、同様の機能を提供する可能性のあるものもあります。 – sasha

+0

:あなたの質問とあなたが提供した例はちょっと混乱しています。 (フロントエンドで特定のデータを動的に処理する) - しかし、それを達成する方法(Angularまたはpure JSを使用して)を明確にしていません。したがって、あなたの例は非常に広範に(今のところ不確実な方向に)変更されなければなりません。私の提案はあなたの話題を扱うチュートリアルをいくつか実行して、あなたの質問を指定するのではないでしょうか。お役に立てれば – sasha

0

あなたの質問には、選択された都市に応じてマイルを変更したいということですか?

私は私の解釈が正しかったかどうかわからないんだけど、私はこのスニペットを作った:

(function() { 
 
    "use strict"; 
 
    angular.module('app', []) 
 
    .controller('mainCtrl', function($scope) { 
 
     $scope.cities = [ 
 
     { 
 
      "name":"Alabama", 
 
      "distance":"400" 
 
     }, 
 
     { 
 
      "name":"Arkansas", 
 
      "distance":"600" 
 
     }, 
 
     { 
 
      "name":"New York", 
 
      "distance":"800" 
 
     } 
 
     ]; 
 
    }) 
 
})();
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <div class="form-group"> 
 
    <select class="form-control" id="city" ng-model="city" ng-options="city as city.name for city in cities"> 
 
     <option value="">--Select city--</option> 
 
    </select> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-7 no-padding-right"> 
 
     <div class="form-group"> 
 
     <div class="input-group"> 
 
      <input type="text" class="form-control" id="distance" ng-model="city.distance"> 
 
      <div class="input-group-addon">miles</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-5 no-padding-left"> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control" id="zip" maxlength="5" ng-model="zip" placeholder="Zip code"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

関連する問題