Question

假设我有国家/地区列表，每个国家/地区都有州/地区列表。所以有两个选择。首先选择国家，当国家更改时，我想触发状态选择的绑定。当国家发生变化时，如何链接这两个控件以触发状态选择的绑定？

<select id="countries" 
data-ng-model="vm.permanentAddress.countryCode"
   data-ng-options="country.code for country in vm.form.countries">
  </select>

<select data-ng-model="vm.permanentAddress.stateCode" 
    data-ng-options="state.value for state in vm.getStatesForCountry(vm.permamentAddress.countryCode)">
</select>

更新：关于我想做什么，我的问题可能并不明确。我不想创建任何新的属性，然后由angular监视更改。我只是想告诉anuglar，嘿，某些事情发生了变化，继续并重新评估此控件的绑定。

不可能吗？

Answer 1

在你的控制器中有这样的东西：

$scope.setStateOptions = function(country){

  $scope.stateOptions = /* whatever code you use to get the states */

}

然后你的html可以是：

<select id="countries" 
   data-ng-model="vm.permanentAddress.countryCode"
   data-ng-options="country.code for country in vm.form.countries"
   data-ng-change="setStateOptions(country)">
  </select>

<select 
    data-ng-model="vm.permanentAddress.stateCode" 
    data-ng-options="state.value for state in stateOptions">
</select>

Answer 2

可能你应该使用jquery chanied select插件： http://jquery-plugins.net/chained-selects-jquery-plugin

我已将它用于链接的4个选择列表，并且工作正常。

THX

Answer 3

这是一个有效的example。您只需使用ng-change来更改为状态设置的模型

Answer 4

您可以利用JavaScript的动态特性将密钥从第一个列表绑定到第二个列表。然后，您只需在更改上设置默认值。如果您删除$watch它仍然有效，则当您切换类别时，第二个select将默认为空。

这是我的数据设置和观察：

app.controller("myController", ['$scope', function($scope) {
    $scope.data = ['shapes', 'colors', 'sizes'];
    $scope.data.shapes = ['square', 'circle', 'ellipse'];
    $scope.data.colors = ['red', 'green', 'blue'];
    $scope.data.sizes = ['small', 'medium', 'large'];       
    $scope.category = 'colors'; 
    $scope.$watch('category', function () {
        $scope.item = $scope.data[$scope.category][0];
    });

这是HTML：

<div ng-app="myApp" ng-controller="myController">
    <select id="categories" 
    data-ng-model="category"        
    data-ng-options="category for category in data"></select>
    <select id="item"         
    data-ng-model="item"         
    data-ng-options="item for item in data[category]"></select>
    {{category}}: {{item}}</div>

当然，您可以将其更改为托管复杂对象，并使用键或其他标识符在列表之间切换。完整的小提琴就在这里：http://jsfiddle.net/jeremylikness/8QDNv/

如何根据另一个选择中更改的值触发select的绑定？

4 个答案: