在按角度綁定選項后從下拉列表中選擇值

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>