使用AngularJS检测多个选择/下拉菜单的相同项目选择

Question

我还是学习了Angular可以做的所有令人敬畏的事情，还有一件事我试图看看如果一组下拉菜单选择了相同的菜单项，则会抛出一个ng-invalid 。

例如，如果我有三个select的下拉菜单，每个拿着的项目有：苹果，桔子，桃子。并且用户选择苹果下拉1和2，我如何使用角度来检测select标签中的这个，并抛出一个ng-invalid？

我正在使用的当前select列表的示例如下。

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

我会使用类似ng-if，或在某种ng-class折腾？我很困惑我在哪里/如何验证角度而不做某种指令或JQuery检查。

Answer 1

可以使用的用户界面，验证了自定义的验证

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

但上面的回答只是一个例子。用ui-验证更多的自定义验证。请阅读有关ui-validate here。

您应该阅读关于表单验证的更多信息。样本链接here/here。