如何禁用不同选择的选项以便始终选择不同的选项？答案

【问题标题】：How can I disable options for different selects in order to have always different options selected?如何禁用不同选择的选项以便始终选择不同的选项？
【发布时间】：2018-06-12 07:19:07
【问题描述】：

我正在使用 Angularjs。

HTML：

<select name="questionId1" ng-model="abCtrl.form.questionSel.q1" ng-options="question.val for question in abCtrl.form.questions track by question.index"></select>

<select name="questionId2" ng-model="abCtrl.form.questionSel.q2" ng-options="question.val for question in abCtrl.form.questions track by question.index"></select>

我希望用户选择的选项将被禁用以用于其他选择，反之亦然

【问题讨论】：

为什么不使用两种不同的模型？

标签： angularjs ng-options angularjs-select

【解决方案1】：

将ng-options 替换为ng-repeat-ed 选项可以同化为回归...

您可以在ng-options 中使用... disable when ... 语法：

第一ng-options：

...  disable when (question.index === questionSel.q2)  ...

第二个ng-options：

...  disable when (question.index === questionSel.q1)  ...

这是一个fiddle

【讨论】：

【解决方案2】：

尝试使用不同的方法，像这样

<select name="questionId1" ng-model="abCtrl.form.questionSel.q1">
<option ng-repeat="question in abCtrl.form.questions" value="{{question.val}}" 
ng-disabled="abCtrl.secondSelectValue == question.val"
ng-selected="abCtrl.firstSelectValue == question.val">{{question.val}}
</option>
</select>

abCtrl.firstSelectValue 将是你的选择框的默认值（否则它会第一次有空选择）

【讨论】：

然后将其反转为第二次选择
你认为只使用
因为这样第一个选项就像''

【解决方案3】：

两种方式：

查看堆栈帖子：ng-options with disabled rows。一个很好的解决方案解释
使用多选组件，例如：http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

【讨论】：

我有两个具有相同选项值和内容的不同选择，我想在 selB 中禁用我在 selA 中选择的内容，反之亦然

【解决方案4】：

你能不能试试 angularngDisabled 网上有很多例子可以请你上网。另外在这里我附上了一些示例代码，例如

为ngDisabled

<!DOCTYPE html>
<html ng-app="sample">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<script>
   angular.module('sample',[]).controller('sampleCntrl',function($rootScope){
   $rootScope.disableVal= true;
   });
</script>
<div ng-controller="sampleCntrl">
<p>
<button ng-disabled="disableVal">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button
</p>
<p>
<button ng-disabled="disableVal">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button
</p>
<p>
{{ mySwitch }}
</p>
</div> 
</body>
</html>

【讨论】：

我必须将 selA 中选择的选项禁用到 selB... ng-disabled 如何帮助我？
我更新了答案，请检查，我的想法是将ngDisabled var 设置为$rootScope。然后我们点击它会自动更新我们使用的每个地方也集中在ng-model。