Question

对角js的一个问题。让我们说我有一系列对象，例如：

items = [
{"id":1,"name":"AAA"},
{"id":2,"name":"BBB"},
{"id":3,"name":"CCC"},
{"id":4,"name":"DDD"}
]

现在我在视图中有2或3个选择。

<select type="text" class="form-control form-control-small" 
ng-model="itemId" ng-options="item.id as item.name for item in items">
</select>

<select type="text" class="form-control form-control-small" 
ng-model="itemId" ng-options="item.id as item.name for item in items">
</select>

<select type="text" class="form-control form-control-small" 
ng-model="itemId" ng-options="item.id as item.name for item in items">
</select>

那么我怎样才能确保我在第一个选择中有所有4个选项，在第二个选项中有3个选项（所有减去选中），第三个选项中有两个（所有减去选中）等等。当任何选择发生变化时，如何更新后续选择。
非常感谢您的想法。

Answer 1

您需要创建一个过滤器 注意：我使用的是ES5过滤功能，除非你使用垫片

否则它将无法在IE8上运行

yourModule.filter('exclude', function () {
    return function (items, exclude) {
        return items.filter(function (item) {
            return exclude.indexOf(item.id) === -1;
        });
    });
});

在你的标记中

<select type="text" class="form-control form-control-small" 
ng-model="itemId1" ng-options="item.id as item.name for item in items">
</select>

<select type="text" class="form-control form-control-small" 
ng-model="itemId2" ng-options="item.id as item.name for item in items | exclude:[itemId1]">
</select>

<select type="text" class="form-control form-control-small" 
ng-model="itemId3" ng-options="item.id as item.name for item in items | exclude:[itemId1, itemId2]">
</select>

如果您想更新您的选择，如果第一个或第二个更改，请使用ngChange指令重置或更改其他模型值。

Answer 2

Module.filter('exclude', function () {
    return function (items, exclude) {
        return items.filter(function (item) {
            return exclude.indexOf(item.id) === -1; // Checking if the itemid is present already in the array
        });
    }
});

在你的标记中

<select type="text" class="form-control form-control-small" 
ng-model="itemIdA" ng-options="item.id as item.name for item in items">
</select>

<select type="text" class="form-control form-control-small" 
ng-model="itemIdB" ng-options="item.id as item.name for item in items | exclude:[itemIdA]">
</select>

<select type="text" class="form-control form-control-small" 
ng-model="itemIdC" ng-options="item.id as item.name for item in items | exclude:[itemIdA, itemIdB]">
</select>

Answer 3

我实际上发现了一个更好的（imho）解决方案。我们只需在数组中添加一个布尔字段，如：

{"id":1,"name":"AAA", "show" : true}

并过滤到ng-options：

 ng-options="item as item.name for item in items | filter : {"show : true}"

从列表中选择项目时，我们需要更新为“显示”值为false，因此在下次选择时它将不可见，并在必要时再次更新为值true。无论如何，你的帮助很多：）

angularjs如何通过多次选择删除重复项

3 个答案: