Question

我是AngularJS的新手，所以如果这个问题很天真，我会道歉。

我们有选择值时填充的级联选择。当选择A的值发生变化时，选择B中的值也会发生变化，因为它们会根据选择A中的值进行过滤。

所以这是场景：

从选择A
从选择B
更改选择A的选择
观察Select B中相应的选项更新。
观察Select B的绑定模型不会相应更新。

这看起来很基本，我们真的在摸不着头脑。如果没有涵盖这种情况，那么双向数据绑定有什么意义呢？

以下是我的观点：

    <body ng-controller="MainCtrl">
   Make:
    <select ng-model="makeng" ng-options="option.value as option.display for option in makes">
        <option ng-disabled="true"  ng-selected="true" value="">Select a make</option>
    </select>
  <br /> 
  {{makeng}}

  <br /> <br /> 

  Model:
    <select ng-model="modelng" ng-options="option.display for option in models | filter:{make:makeng}">
        <option ng-disabled="true"  ng-selected="true" value="">Select a model</option>
    </select>
    {{modelng}}
  </body>

这是一个Plunkr，展示： http://plnkr.co/edit/9XrKgW?p=preview

P.S。上面的例子纯粹是虚构的，并且是从另一个plunkr分叉出来的。这是展示我们所看到的最简单的方法。

Answer 1

这是应该如何工作的。 select控件会根据用户的选择更改模型，但如果您从其下方更改允许值的集合（即通过过滤掉），则会保持模型的完整性。

实现这项工作的方法是使模型无效以响应Select A中的更改：

Make:
<select ng-model="makeng" 
      ng-options="option.value as option.display for option in makes"
      ng-change="modelng = undefined">
   <option value="">Select a make</option>
</select>
<br /> 

Model:
<select ng-model="modelng" 
        ng-options="option.display for option in models | filter:{make:makeng}">
   <option value="">Select a model</option>
</select>

AngularJS：当ng-options刷新时，ng-model不会更新

1 个答案: