CODEWITHSUNDEEP
javascriptangularjs
kamil.rak
kamil.rak

Reputation: 1378

angularjs how to remove duplicates by multiple select


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.

Upvotes: 2

Views: 1571

Answers (3)

kamil.rak
kamil.rak

Reputation: 1378

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

Upvotes: 0

Thomas Roch
Thomas Roch

Reputation: 1216

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.

Upvotes: 1

mohamedrias
mohamedrias

Reputation: 18576

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>

Upvotes: 1

Related Questions