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

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

1 个答案: