CODEWITHSUNDEEP
javascriptangularjsselecthide
user2244925
user2244925

Reputation: 2354

Two select picker that doesn't show the selected value in the other

is there in AngularJS a nice way that it is possible to hide the selected value from the first select picker in the second one?

If I select another value in the first one it need's to be visible again in the second one.

I wrote something with pure javascript that works but it's like magic code that you never want to touch.

Thanks for your help.

Upvotes: 0

Views: 350

Answers (1)

New Dev
New Dev

Reputation: 49590

You just need to add a filter to the second <select>. The negative filter's syntax is as follows:

items | filter: "!somevalue"

or

items | filter: "!" + var

for var variable that contains the filtered out string.

So, the full solution looks like so:

<select ng-model="select1"
        ng-options = "item for item in items" ng-change="select2 = undefined">
    <option value="">select 1</option>      
</select>

<select ng-model="select2"
        ng-options = "item for item in items | filter: '!' + select1">
    <option value="">select 2</option>
</select>

plunker

EDIT:

If the order of the selection should not matter, then you could filter as follows:

<select ng-model="select1" ng-options="item for item in items | filter: filter1" 
        ng-change="filter2 = select1 ? '!' + select1 : undefined">
  <option value="">select 1</option>
</select>

<select ng-model="select2" ng-options="item for item in items | filter: filter2"
        ng-change="filter1 = select2 ? '!' + select2 : undefined">
  <option value="">select 2</option>
</select>

(when filter expression is undefined the filter doesn't apply)

plunker 2

Upvotes: 1

Related Questions