angularjs how to remove duplicates by multiple select

Question

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

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.

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

question is not clear. please edit it, or post a fiddle demonstrating it. — snehatulsi
– snehatulsi, Commented Feb 19, 2015 at 10:28
May i ask why do you need this functionality? Maybe multiselect will be enought? — Kasyx
– Kasyx, Commented Feb 19, 2015 at 10:31
I just have such a requirement, I'd like to do it with multiselect, but this solution is impossible for me. — kamil.rak
– kamil.rak, Commented Feb 19, 2015 at 10:57

Thomas Roch · Accepted Answer · 2015-02-19 11:32:22Z

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

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.

edited Feb 19, 2015 at 11:32

answered Feb 19, 2015 at 10:27

Thomas Roch

1,2168 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kamil.rak Over a year ago

The solution will be probably sth like this, but I can not name my ng-model like "id1", "id2". I add the new select dinamically on demand so every "row" has the same model

mohamedrias Over a year ago

exclude.indexOf(item) === -1; in this line it should be exclude.indexOf(item.id) as we are matching ids and not entire item @Thomas Roch

Thomas Roch Over a year ago

Thanks @mohamedrias but no need for you to copy paste.

kamil.rak Over a year ago

Thanks it worked for me. Anyway I was able to change the requirements so I run it with multiselect :)

mohamedrias · Accepted Answer · 2015-02-19 11:14:59Z

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>

kamil.rak · Accepted Answer · 2015-02-22 07:40:21Z

0

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="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 :)

answered Feb 22, 2015 at 7:40

kamil.rak

1,3781 gold badge14 silver badges28 bronze badges

Collectives™ on Stack Overflow

angularjs how to remove duplicates by multiple select

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related