绑定角度选项后从下拉列表中选择值答案

【问题标题】：select value from dropdown after bind the options in angular绑定角度选项后从下拉列表中选择值
【发布时间】：2015-03-31 21:33:50
【问题描述】：

我有一个角度模块中的模型

$scope.employee  = {}
$scope.countries={}
$scope..employee.Country_id = 10
$scope.employee.City_id = 50

然后我以以下方式绑定两个选择元素

$http.get("/api/initdataapi/GetCountry").success(function (data) {
    $scope.countries = data;
});
$scope.$watch('employee.Country_id', function (newValue, oldValue) {
    var url = "/api/initdataapi/GetByCountry/" + newValue;
    $http.get(url).success(function (data) {
        $scope.Cities = data;

    });

问题是当页面加载了角度绑定国家并选择employee.Country_id的值并且$watch检测模型更改并触发getCities时，角度绑定城市到选择元素但它没有选择员工城市

HTML：

<div class="col-sm-3 premove">
    <span>Nationality</span>
    <select ng-model="employee.Country_id " >
        <option ng-repeat="county in countries" value="{{county.Id}}">{{county.Name_En}}</option>
    </select>
</div>
<div class="col-sm-4 premove">
    <span>Place of birth -{{employee.City_Id}}</span>
    <select ng-model="employee.City_Id">
        <option ng-repeat="birthCity in Cities" value="{{birthCity.City_Id}}">{{birthCity.City_Ename}}</option>
    </select>
</div>

我应该怎么做才能解决这个问题？

【问题讨论】：

尝试改变你的模型，让员工和他的城市在一个特定的数组中。

标签： javascript jquery angularjs

【解决方案1】：

尝试使用 ng-option 代替 select 和 option。你的 html 应该是

<div class="col-sm-3 premove">
                    <span>Nationality</span>
          <select ng-options="country.Id as country.Name_En for country in countries" ng-model="employee.Country_id"></select>      
 </div>
 <div class="col-sm-4 premove">
                    <span>Place of birth -{{employee.City_Id}}</span>
         <select ng-options="birthCity.City_Id as birthCity.City_Ename for birthCity in Cities" ng-model="employee.City_Id"></select>    
                </div>

【讨论】：