如何分配默認值從後端迴應下拉

我有一個本地$ scope.countries在我的HTML填充國家州城市，但不是選擇作爲默認值在下拉列表中，我需要顯示國家州城市值來自後端作爲默認設置。例如，阿富汗，巴達謝山。如何分配默認值從後端迴應下拉

Plunker代碼在這裏。 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

您的重擊器有很多更改！很抱歉地說，但爲什麼地球上你使用JQuery將Ajax結果綁定到下拉菜單？爲什麼不使用$ scope/ng-options？ –

你能分享我一些例子嗎？ –

http://stackoverflow.com/a/39716944/4316707看看這個答案它有一個plunker演示如何使用 –

多級下拉的示例代碼。有很多方法可以實現這個..

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，它不會將選定的值分配爲德里。 –

爵士可以直接使用型號名稱。 –

看到http://jsfiddle.net/fA968/275/鏈接 –