AngularJS <select> вопросы

Question

У меня возникла странная проблема. Я использую AngularJS в своем приложении, и у меня проблемы с тегом. У меня есть контроллер, чтобы иметь города и государства, обрабатываемые мои элементы:

function MeuController($scope, $http) { 

$scope.states = []; 
$scope.selectedState = ''; 

$scope.cities = []; 
$scope.selectedCity = ''; 

$http.get('/state/GetStates').success(function(result) { 
    $scope.states = result; 
}); 

$scope.getCities = function() { 
    $http.get('/cities/GetCitiesByState?state=' + $scope.selectedState).success(function(result) { 
     $scope.cities = result; 
    }); 
} 
}); 

На данный момент, все в порядке, и легко понять. Но ...

Когда я создаю свои элементы таким образом:

<select class="span2" name="SelectedState" ng-model="selectedState" 
ng-change="getCities()" ng-options="state.ID as state.Name for state in states"> 
    <option></option> 
</select> 

<select class="span6" name="SelectedCity" ng-model="selectedCity" 
ng-options="city.ID as city.Name for city in cities"> 
    <option></option> 
</select> 

... мои элементы не заполнены.

Если я пытаюсь так:

<select class="span2" name="SelectedState" ng-model="selectedState" 
ng-change="getCities()"> 
    <option ng-repeat="state in states" value="state.ID">{{state.Name}}</option> 
</select> 

<select class="span6" name="SelectedCity" ng-model="selectedCity"> 
    <option ng-repeat="city in cities" value="city.ID">{{city.Name}}</option> 
</select> 

Теперь значения заполняются в элементы. Хотя, если я изменяю значение переменной «selectedState», мой элемент не «выбирает» правильное значение?

Кто-нибудь знает почему?

Большое вам спасибо!

Answer 1

Хорошо, так что на самом деле проблема между ng-model и ng-options.

Когда вы делаете:

<select class="span6" name="SelectedCity" ng-model="selectedCity" 
ng-options="city.ID as city.Name for city in cities"></select> 

Затем $scope.selectedCity присваивается city.ID и не только city (проверить это fiddle).

Вы должны написать это:

<select class="span6" name="SelectedCity" ng-model="selectedCity" 
ng-options="city.Name for city in cities"></select> 

Проверьте результат в этом fiddle.

Решает ли ваша проблема?