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。

中的结果

它能解决你的问题吗？

AngularJS <select>发布</select>

1 个答案: