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

angularjs how to remove duplicates by multiple select

本文关键字：删除 何通过 angularjs      更新时间：2024-01-12


向angular 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个选项（均为负选择），在第三次选择中为两个选项（也均为负选中），依此类推。以及如何在任何选择发生更改时更新后续选择。
非常感谢您的想法。

您需要创建一个过滤器
注意：我使用的是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指令重置或更改其他模型值。

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>

我实际上找到了一个更好的（imho）solation。我们只是在数组中添加一个布尔字段，比如：

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

和过滤到ng选项：

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

当从列表中选择一个项目时，我们需要更新以将值"显示"为false，这样它在下一次选择时就不可见，并在必要时再次更新为true。无论如何，有很多需要你的帮助：）

相关文章：