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

【问题标题】：Detect same item selection for multiple select/dropdowns with AngularJS使用AngularJS检测多个选择/下拉菜单的相同项目选择
【发布时间】：2014-10-21 10:45:48
【问题描述】：

我仍然是新手，学习了 Angular 可以做的所有很棒的事情，如果一组下拉菜单选择了相同的项目，我正在尝试查看的一件事是抛出 ng-invalid。

例如，如果我有三个selects 下拉菜单，每个下拉菜单都包含以下项目：苹果、橙子、桃子。并且用户选择了苹果作为下拉菜单 1 和 2，我如何使用 angular 在 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 检查的情况下验证角度的位置/方式感到困惑。

【问题讨论】：

标签： javascript angularjs select

【解决方案1】：

您可以使用 ui-validate 进行自定义验证

<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-validate 进行更多自定义验证。请阅读ui-validate here。

您应该阅读有关表单验证的更多信息。示例链接here/here.

【讨论】：