How can I disable options for different selects in

2019-08-31 23:18发布

站内问答 / 移动开发
402 4 4

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

4条回答
甜甜的少女心
2楼-- · 2019-08-31 23:23

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

查看更多
0人赞 添加讨论(0) 举报
Viruses.
3楼-- · 2019-08-31 23:27

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)

查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
4楼-- · 2019-08-31 23:29

Two ways:

查看更多
0人赞 添加讨论(0) 举报
Anthone
5楼-- · 2019-08-31 23:29

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)