在按角度绑定选项后从下拉列表中选择值

Question

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

$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 ，角度绑定将城市绑定到select元素中，但未选择员工市

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>

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

Answer 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>