Два выбора выбора, которые не показывают выбранное значение в другом

Question

Есть ли в AngularJS хороший способ, чтобы можно было скрыть выбранное значение из первого выбора выбора во втором?

Если я выбираю другое значение в первом, необходимо снова увидеть его во втором.

Я написал что-то с чистым javascript, который работает, но это похоже на волшебный код, который вы никогда не хотите трогать.

Благодарим за помощь.

Answer 1

Вам просто нужно добавить фильтр ко второму <select>. Синтаксис отрицательного фильтра заключается в следующем:

items | filter: "!somevalue"

или

items | filter: "!" + var

для var переменной, содержащей отфильтрованы строку.

Таким образом, полное решение выглядит так:

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

Если порядок выбора не имеет значения, то можно отфильтровать следующим образом:

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

(когда выражение фильтра undefined фильтр не применяется)

plunker 2