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

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