如何通过多重选择删除重复

a question to angular js. Let's say I have an array of objects eg:

一个关于角度js的问题。假设我有一个对象数组例如:

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

Now I have 2 or 3 selects in my 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>

So how can I assure that I have all 4 options in the first select, 3 options in the second one (all minus selected), two in the third one (also all minus selected) and so on. And how can I update the subsequent selects whenever there is a change in any of the selects.
Many thanks in advance for ideas.

所以我怎么能保证我在第一个选择中有4个选项，在第二个选择中有3个选项(都是减选的)，在第三个选择中有2个(也都是减选的)等等。以及如何更新后续的选择，当任何一个选择发生变化时。非常感谢您的建议。

3 个解决方案

#1

You need to create a filter.
Note: I am using the ES5 filter function, it won't work on IE8 unless your use a shim

您需要创建一个过滤器。注意:我正在使用ES5过滤器功能，除非你使用垫片，否则它不会在IE8上工作

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

And in your markup

和在你的标记

<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>

If you want to update your selects if there is a change in the first or second one, use ngChange directive for resetting or changing other model values.

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

#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
        });
    }
});

And in your markup

和在你的标记

<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>

#3

I actually found a better (imho) solition. We just add a boolean field to the array, like:

我发现了一个更好的固体。我们只需在数组中添加一个布尔域，比如:

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

and filter to ng-options:

和过滤ng-options:

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

When selecting an item from the list we need to update to "show" value to false, so it won't be visible on the next select and update again to value true when when it is necessary. Anyway thx a lot for your help :)

当从列表中选择一个项时，我们需要将其更新为“show”值为false，以便在下一个select中不可见，并在必要时再次更新为值true。无论如何，非常感谢你的帮助。