两个选择器在另一个中不显示所选值

Question

AngularJS 中是否有一种很好的方法可以在第二个选择器中隐藏第一个选择器中的选定值？

如果我在第一个值中选择另一个值，它需要在第二个值中再次可见。

我用纯 javascript 写了一些东西，但它就像你永远不想碰的魔法代码。

感谢您的帮助。

Answer 1

您只需为第二个<select> 添加一个过滤器。否定过滤器的语法如下：

items | filter: "!somevalue"

或

items | filter: "!" + var

对于包含过滤出的字符串的var 变量。

所以，完整的解决方案如下所示：

<select ng-model="select1"
        ng-options = "item for item in items" ng-change="select2 = undefined">
    <option value="">select 1</option>      
</select>

<select ng-model="select2"
        ng-options = "item for item in items | filter: '!' + select1">
    <option value="">select 2</option>
</select>

plunker

编辑：

如果选择的顺序无关紧要，那么您可以按如下方式过滤：

<select ng-model="select1" ng-options="item for item in items | filter: filter1" 
        ng-change="filter2 = select1 ? '!' + select1 : undefined">
  <option value="">select 1</option>
</select>

<select ng-model="select2" ng-options="item for item in items | filter: filter2"
        ng-change="filter1 = select2 ? '!' + select2 : undefined">
  <option value="">select 2</option>
</select>

（当过滤器表达式为undefined时过滤器不适用）

plunker 2