Detect selection of the same item for multiple select / dropdowns with AngularJS
I'm still new to learning all the great things Angular can do, and one thing I'm trying to look at is throwing away ng-invalid
if the same item is selected in a set of dropdowns.
For example, if I had three select
drop downs, each containing elements: apple, orange, peach. And the user selected apple for dropdown 1 and 2, how can I use Angular to detect this in the tag select
and throw it away ng-invalid
?
an example of the current select
list I am using is 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 throw in some kind ng-class
? I'm confused as to where / how I would check against Angular without doing any directive or JQuery validation.
source to share
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 just an example. with ui-validate some more custom validations. please read ui-validate here .
you should learn more about form validation. Sample links here / here .
source to share