バックエンドの応答からドロップダウンにデフォルト値を割り当てる方法

私はhtmlの中に$州のスコープを持っていますが、ここでは国の都市に値を設定しますが、ドロップダウンのデフォルト値として選択するのではなく、例えば、Afganistan、Badhakshan。バックエンドの応答からドロップダウンにデフォルト値を割り当てる方法

プランカコードはこちらです。 http://plnkr.co/edit/DPoOFRKGXO28tDXzGe5B?p=preview

<html lang="en-US"> 
    <head> 
     <meta charset="utf-8"> 

     <link href="css/custom.css" rel="stylesheet"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
    </head> 
    <body ng-controller="MainCtrl"> 
     <form action="#" role="form" class="form-horizontal" id="location" method="post" accept-charset="utf-8"> 
     <div class="form-group"> 
    <div class="col-sm-4"> 
     <select name="country" ng-model="model.country" class="form-control countries" id="countryId" required="required"> 
<option value="">Select Country</option> 
</select> 
    </div> 
</div> 
<div class="form-group"> 
<div class="col-sm-4"> 
     <select name="state" ng-model="model.state" class="form-control states" id="stateId" required="required"> 
<option value="">Select State</option> 
</select> 
    </div> 
</div> 
<div class="form-group"> 
<div class="col-sm-4"> 
     <select name="city" ng-model="model.city" class="form-control cities" id="cityId" required="required"> 
<option value="">Select City</option> 
</select> 
    </div> 
</div> 
</form> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script src="app.js"></script> 
    <script src="location.js"></script> 

</body> 
</html>

JS：

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 

    var response = { 

       "response": 
       {"json": 
       {"session_id":"498", 
       "profile":{"country":"Afghanistan", 
       "state":"Badakhshan","city":"Eshkashem", 
       "pincode":"54564", 
       "rolemandatory":1}, 
       "roles":[]}}} 

$scope.getProfile = function() { 
       $scope.model.country = response.response.json.profile.country; 
       $scope.model.state = response.response.json.profile.state; 
       $scope.model.city = response.response.json.profile.city; 
      }; 


});

出典

2016-11-08 Nicoleta Wilskon

あなたのプランカーには多くの変更があります。申し訳ありませんが、なぜ地球上でAJAXの結果をドロップダウンにバインドするためにJqueryを使用していますか？なぜ$ scope/ng-optionsを使用しないのですか？ –

私にいくつかの例を教えていただけますか？ –

http://stackoverflow.com/a/39716944/4316707この回答を確認してください使用方法に関するデモがあります –

マルチレベルドロップダウンのサンプルコード。これを達成するための多くの方法がある。..

function myCtrl($scope) { 
 
    $scope.selectedDist = {}; 
 
    $scope.selectedThana = {}; 
 
    $scope.districts = [ 
 
     {id: 1, name: 'Delhi'}, 
 
     {id: 2, name: 'Mumbai'}, 
 
     {id: 3, name: 'Chennai'} 
 
    ]; 
 

 
    $scope.thanas = [ 
 
     {id: 1, name: 'Mirpur', dId: 1}, 
 
     {id: 2, name: 'Uttra', dId: 1}, 
 
     {id: 3, name: 'Shahabag', dId: 1}, 
 
     {id: 4, name: 'Kotalipara', dId: 2}, 
 
     {id: 5, name: 'Kashiani', dId: 2}, 
 
     {id: 6, name: 'Moksedpur', dId: 2}, 
 
     {id: 7, name: 'Vanga', dId: 3}, 
 
     {id: 8, name: 'faridpur', dId: 3} 
 
    ]; 
 

 
    $scope.localeList = [ 
 
     {id: 1, name: 'Ulhasnagar', tId: 1}, 
 
     {id: 2, name: 'Ambarnath', tId: 1}, 
 
     {id: 3, name: 'Kalyan', tId: 5}, 
 
     {id: 4, name: 'Vithalvadi', tId: 2}, 
 
     {id: 5, name: 'Vikhroli', tId: 6}, 
 
     {id: 6, name: 'Kanjurmarg', tId: 2}, 
 
     {id: 7, name: 'Ghatkopar', tId: 3}, 
 
     {id: 8, name: 'Kamlakar nagar', tId: 3}, 
 
     {id: 9, name: 'Kolsewadi', tId: 4}, 
 
     {id: 10, name: 'Fort', tId: 7}, 
 
     {id: 11, name: 'Gudgava', tId: 8}, 
 
     {id: 12, name: 'Mayur Vihar', tId: 8}, 
 
     {id: 13, name: 'Chinchpokli', tId: 6} 
 
    ]; 
 

 
    $scope.filterThana = function (thana) { 
 
     return (thana.dId === $scope.selectedDist.id); 
 
    }; 
 
    $scope.filterLocale = function (locale) { 
 
     return (locale.tId === $scope.selectedThana.id); 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 

 

 
<div ng-app ng-controller="myCtrl"> 
 
     <div class="col-xs-6"> 
 
      <form class="form-horizontal" name="testForm"> 
 
       <div class="form-group"> 
 
        <div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> District List</label></div> 
 
        <div class="col-md-4"> 
 
        <select class="form-control" name="dist" required ng-model="selectedDist" ng-options="district.name for district in districts"> 
 
         <option value="">Select</option> 
 
        </select> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> Thana List</label></div> 
 
        <div class="col-md-4"> 
 
        <select class="form-control" name="thana" required ng-model="selectedThana" ng-options="thana.name for thana in thanas | filter: filterThana"> 
 
         <option value="">Select</option> 
 
        </select> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> Locale List</label></div> 
 
        <div class="col-md-4"> 
 
        <select class="form-control" name="local" required ng-model="selectedLocale" ng-options="locale.name for locale in localeList | filter: filterLocale"> 
 
         <option value="">Select</option> 
 
        </select> 
 
        </div> 
 
       </div> 
 
      </form> 
 
     </div> 
 

 
     </div>

出典

2016-11-08 11:21:16

こんにちは、どのようにng-私が$ scope.selectedDist = response.cityを指定した場合、それはDelhiとして選択された値を割り当てていません。 –

モデル名を直接使用することができます。 –

http://jsfiddle.net/fA968/275/を参照してください。 –

何今まであなたが書いたことは、コードの上に正しい.INである私は

1.youはあなたのhtmlでangular

含めていないいくつかのミスを発見

2.設定しないときmodel.countrymodel.stateとmodel.cityの値

あなたはその機能の完了後にjQueryを使用してオプションを生成する場合 ng-optionsを使用してボックスを選択し、 $http

4.Evenを使用してデータを取得するの

3.Bindオプションはここで$("#countryId").val(your default value);

を使用して選択ボックスの更新に便利ですリンク

https://docs.angularjs.org/api/ng/directive/ngOptions

https://docs.angularjs.org/api/ng/service/ $ HTTP

出典

2016-11-08 11:03:36

私はそれを見て参照してください –

私はあなたのコントローラを持っている.. uはちょうどそれを照会し、あなたのビューに表示し..andあなたのデータのためのAPIを作成することをおすすめあなたのAPIを照会して値を取得するfind（）関数。HTMLビューでng-init = find（）を呼び出します..

出典

2016-11-08 16:29:25

APIを作成するための提案はありますか？ –

バックエンドの応答からドロップダウンにデフォルト値を割り当てる方法

答えて

関連する問題