How can I disable options for different selects in order to have always different options selected?

问题

I'm working with 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>

I'd like the option the user selects will be disabled for the other selection and vice versa

回答1:

Replacing ng-options with ng-repeat-ed options can be assimilated to a regression...

You can use ... disable when ... syntax in ng-options:

First ng-options:

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

Second ng-options:

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

Here is a fiddle

回答2:

Try to use different approach, like this

<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 would be default value of ur select box (otherwise it would have empty selection first time)

回答3:

Two ways:

Look at the stack post: ng-options with disabled rows. A good solution is explained
Use a multi-slect component, by instance: http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

回答4:

Could you please try on angular ngDisabled there is lot of example's available in net could you please surf it . Also here I am attaching some sample code like

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

来源：https://stackoverflow.com/questions/33345399/how-can-i-disable-options-for-different-selects-in-order-to-have-always-differen

标签

angularjs

ng-options

angularjs-select