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
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
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)
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/#/
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>
ngDisabled var as $rootScope .Then where ever we click it will automatically update's every where we used also concentrate on ng-model.