Detect same item selection for multiple select/dropdowns with AngularJS

Question

I am still new with learning all the awesome things Angular can do and one thing I am trying to look at is throwing an ng-invalid if a set of dropdowns have the same item selected.

For example, if I had three selects drop downs, each holding the items: apple, orange, peach. And the user selected apple for drop down 1 and 2, how can I use angular to detect this within the select tag, and throw an ng-invalid?

an example of the current select list I am using are as follows.

<span>
   <select ng-options="champ1.cID as champ1.cName for champ1 in Champions1 | orderBy: 'cName'" ng-init="0" ng-model="champ1">{{champ1.cName}}</select>
</span>
<span>
   <select ng-options="champ2.cID as champ2.cName for champ2 in Champions2 | orderBy: 'cName'" ng-init="0" ng-model="champ2">{{champ2.cName}}</select>
</span>
<span>
   <select ng-options="champ3.cID as champ3.cName for champ3 in Champions3 | orderBy: 'cName'" ng-init="0" ng-model="champ3">{{champ3.cName}}</select>
</span>

Would I use something like ng-if, or toss in some kind of ng-class? I am confused on where/how I would validate in regards to angular without doing some kind of directive or JQuery check.

harishr · Accepted Answer · 2014-08-27 18:52:48Z

2

you can use ui-validate for custom validations

<select ng-options="champ3.cID as champ3.cName for champ3 in Champions3 | orderBy: 'cName'" 
   ng-init="0" ng-model="champ3" 
   ui-validate="{'same' : 'champ1 == champ3 || champ2 == cmap3'}">
  {{champ3.cName}}
</select>

but above answer only an example. with ui-validate many more custom validations. please read about ui-validate here.

you should read more about forms validations. sample links here/here .

answered Aug 27, 2014 at 18:52

harishr

18.1k9 gold badges84 silver badges131 bronze badges

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

Collectives™ on Stack Overflow

Detect same item selection for multiple select/dropdowns with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related