javascript - angularjs如何通过多个选择删除重复项

Question

一个关于 Angular JS 的问题。假设我有一个对象数组，例如:

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

现在我的 View 中有 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 过滤功能，除非您使用 shim，否则它不会在 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 指令来重置或更改其他模型值。