Question

我有两个选择菜单。一个用于国家选择，另一个用于州。我需要根据所选国家/地区更新状态。我能够记录状态，但无法在选择菜单中列出它们。请帮助。

角：

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：

<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

Answer 1

您需要将ng-model添加到您的州<select> - 当您使用ng-options

时，这是必需的

状态数据也有一个不方便的模型。与国家/地区状态对应的数据数组的每个元素都是具有更改键的对象，其值是状态数组。您可以使其正常工作，但最好将其更改为更合理的内容：

$scope.data = {
  1: [{ label: 'Delhi', value: 0 }, {...}, ],
  2: [{...}, {...}, ] // same for US
}

然后它会与您为州指定ng-options的方式一致，而且您不必处理索引：

$scope.updateStates = function(countryCode){
    $scope.vm.states = $scope.data[countryCode]; // access by property
};

Answer 2

我认为，如果你不想改变你的模型，你应该使用这样的过滤器：

.filter('stateFilter', function() {
  return function(states, countryID) {
    var filtered = [];

    angular.forEach(states, function(state){
        if(state.value === countryID)
            filtered.push(state);
    });

    return filtered;
  };
});

在第一个选择控件中过滤掉所有值等于所选country.value的值。

要使用该过滤器，您需要在状态选择控件中修改ng-repeat指令值：

ng-options="state as state.label for data | stateFilter:correctlySelected"

Answer 3

我提出了以下解决方案，查看我的JSBin

此解决方案的工作原理是在我们更新状态时将countryCode设置在范围内。

$scope.updateStates = function(countryCode){
    $scope.countryCode = countryCode;
    $scope.vm.states = $scope.data[countryCode-1];
    console.log($scope.vm.states[countryCode]);
};

然后，此更改将反映在视图中。

<select>
    <option ng-repeat='i in vm.states[countryCode]'> {{i.label}}
    </option>
</select>

Angularjs：更新选择选项

3 个答案: