javascript Angularjs：更新选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29219491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs: update select options
提问by Triven
I have two select menus . One for country selection and other for state. I need to update states based country selected. I am able to log states but not able to list them in select menu.Please help.
我有两个选择菜单。一个用于国家选择，另一个用于州。我需要更新所选国家/地区的状态。我能够记录状态但无法在选择菜单中列出它们。请帮忙。
Angular:
角度：
angular.module('demoApp', []).controller('DemoController', function($scope) {
$scope.countries = [
{ label: 'Please select', value: 0 },
{ label: 'India', value: 1 },
{ label: 'US', value: 2 }
];
$scope.data = [{'1':[{ label: 'Delhi', value: 0 },{ label: 'Mumbai', value: 1 },{ label: 'Chennai', value: 2 }]},
{'2':[{ label: 'Alabama', value: 3 },{ label: 'Alaska', value: 4 },{ label: 'Arizona', value: 5 }]}];
$scope.vm = {states: []};
$scope.updateStates = function(countryCode){
$scope.vm.states = $scope.data[countryCode-1];
console.log($scope.vm.states);
};
$scope.correctlySelected = $scope.countries[0];
});
HTML:
HTML：
<body ng-app="demoApp">
<div ng-controller="DemoController">
<select ng-model="correctlySelected" ng-change="updateStates(correctlySelected.value)" ng-options="opt as opt.label for opt in countries">
</select>
<select ng-options="opt as opt.label for opt in vm.states">
</select>
</div>
</body>
JS Bin: http://jsbin.com/pafosewedo/1/edit?html,js,console,output
JS Bin：http: //jsbin.com/pafosewedo/1/edit?html,js,console, output
回答by New Dev
You need to add ng-modelto your states <select>- this is required when you are using ng-options
您需要添加ng-model到您的状态<select>- 这在您使用时是必需的ng-options
You also have an inconvenient model for the states data. Each element of the data array that corresponds to the country's states is an object with a changing key whose value is an array of states. You couldmake it work, but it's better to change it to something more reasonable:
您还有一个不方便的状态数据模型。对应于国家/地区的数据数组的每个元素都是一个具有变化键的对象，其值是一个状态数组。你可以让它工作，但最好把它改成更合理的东西：
$scope.data = {
1: [{ label: 'Delhi', value: 0 }, {...}, ],
2: [{...}, {...}, ] // same for US
}
Then it would work with how you specified your ng-optionsfor states, and you wouldn't have to deal with indices:
然后它将与您指定ng-optionsfor 状态的方式一起使用，并且您不必处理索引：
$scope.updateStates = function(countryCode){
$scope.vm.states = $scope.data[countryCode]; // access by property
};
回答by Krzysiek
I think, that you should use some filter like that if you don't want to change your model:
我认为，如果你不想改变你的模型，你应该使用一些这样的过滤器：
.filter('stateFilter', function() {
return function(states, countryID) {
var filtered = [];
angular.forEach(states, function(state){
if(state.value === countryID)
filtered.push(state);
});
return filtered;
};
});
to filter out all values that have value equal to selected country.value in first select control.
在第一个选择控件中过滤掉所有值等于所选 country.value 的值。
To use that filter you need to modify your ng-repeat directive value in state select control:
要使用该过滤器，您需要在状态选择控件中修改 ng-repeat 指令值：
ng-options="state as state.label for data | stateFilter:correctlySelected"
回答by Eric E
I came up with the following solution, view my JSBin
我想出了以下解决方案，查看我的JSBin
This solutions works by setting the countryCode in the scope when we are updatingStates.
此解决方案通过在我们更新状态时在范围内设置 countryCode 来起作用。
$scope.updateStates = function(countryCode){
$scope.countryCode = countryCode;
$scope.vm.states = $scope.data[countryCode-1];
console.log($scope.vm.states[countryCode]);
};
This change is then reflected in the view.
此更改随后会反映在视图中。
<select>
<option ng-repeat='i in vm.states[countryCode]'> {{i.label}}
</option>
</select>
