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

Question

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

why are you don't use two different model? – Furkan Başaran Oct 26 '15 at 12:18 — Furkan Başaran, Oct 26 '15 at 12:18

score 2 · Accepted Answer · answered Oct 26 '15 at 17:33

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

score 1 · Answer 2 · answered Oct 26 '15 at 13:29

1

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)

answered Oct 26 '15 at 13:29

Bleja_

61
4

and just invert this for second select – Bleja_ Oct 26 '15 at 13:40
do you think it's possible doing that using just – Donovant Oct 26 '15 at 14:26
Because in that way the first option is like '' – Donovant Oct 26 '15 at 14:29

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

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

edited May 23 '17 at 12:03

Community

1
1

answered Oct 26 '15 at 12:22

Azylaans

675
6
17

I have two different select with same options value and content, I want to disable in selB what I've selected in selA and vice versa – Donovant Oct 26 '15 at 12:48

SakthiSureshAnand · Answer 4 · 2015-10-26T13:52:27.677

0

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>

edited Oct 26 '15 at 13:52

answered Oct 26 '15 at 12:27

SakthiSureshAnand

1,204
15
29

I've to disable the option selected in selA into selB... how can ng-disabled help me? – Donovant Oct 26 '15 at 13:06
I updated the answer please check and my idea is set the `ngDisabled` var as `$rootScope` .Then where ever we click it will automatically update's every where we used also concentrate on `ng-model`. – SakthiSureshAnand Oct 26 '15 at 13:47

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

4 Answers4

Linked