Angularjs 禁用下拉菜单 [英] Angularjs disabling drop down
问题描述
我有一个用户界面,根据一个下拉菜单的选择,另一个下拉菜单应该被禁用.这两个下拉菜单都是使用 ng-repeat 生成的.下面是代码示例
<tr data-ng-repeat="xyz.divisionViewList 中的abc" ><选择data-ng-model="abc.selectedAppRole"ng-init="abc.selectedAppRole =abc.selectedAdRole"id="{{abc.applicationId}}_{{abc.divisionId}}" name="{{abc.selectedAppRole}}"><option value="null">选择/取消选择角色</option><option data-ng-repeat="abc.roleDetails 中的roleDetail" data-ng-selected="{{abc.adRole == abc.selectedAdRole}}"value="{{abc.adRole}}"> {{abc.roleDesc}} </option></选择></tr>
由于这是一个基于 ng-repeat 的动态生成的下拉列表,我想根据一个下拉列表的选择进行验证.请让我知道如何进行此验证,以便我可以根据其他人的选择禁用和启用任何下拉列表.我真的坚持这个.
使用 ng-disabled
并使用下拉列表之一的模型值禁用/启用另一个.
示例应用:
angular.module('app', []).controller('MyController', function($scope){$scope.dropdownSelections = {};$scope.dropdownA = [{值:1,标签:'项目A1'},{值:2,标签:'项目A2'},{值:3,标签:'项目A3'},{值:4,标签:'项目A4'}];$scope.dropdownB = [{值:1,标签:'项目B1'},{值:2,标签:'项目B2'},{值:3,标签:'项目B3'},{值:4,标签:'项目B4'}];$scope.dropdownC = [{值:1,标签:'项目C1'},{值:2,标签:'项目C2'},{值:3,标签:'项目C3'},{值:4,标签:'项目C4'}];});
示例模板代码:
<div>下拉选择:{{dropdownSelections}}</div><div><legend>下拉菜单A</legend><select name="A" id="A" ng-model="dropdownSelections.dropdowA" ng-options="item.value as item.label for item in dropdownA"></select><div><legend>下拉菜单B</legend><select name="B" id="B" ng-model="dropdownSelections.dropdowB" ng-options="item.value as item.label for item in dropdownB" ng-disabled="dropdownSelections.dropdowA !==2"></选择>
<div><legend>下拉菜单C</legend><select name="C" id="C" ng-model="dropdownSelections.dropdowC" ng-options="item.value as item.label for item in dropdownC" ng-disabled="dropdownSelections.dropdowB !==3"></选择>
当 DropdownA 选择了选项 2 时,将启用 DropdownB.当 DropdownB 选择了选项 3 时,将启用 DropdownC.当然这只是基本的例子,代码并不完善,只是演示了思路.
我在 这个 JSFiddle 中创建了工作示例.
可以在此文档中找到有关 ng-disabled 的更多信息.
I have a ui in which based on the selection of one drop down another dropdown should be disabled. Both these dropdowns are generated using ng-repeat . Below is the code sample
<tr data-ng-repeat="abc in xyz.divisionViewList" >
<select
data-ng-model="abc.selectedAppRole"
ng-init="abc.selectedAppRole =abc.selectedAdRole"
id="{{abc.applicationId}}_{{abc.divisionId}}" name="{{abc.selectedAppRole}}">
<option value="null">Select/Deselect a role</option>
<option data-ng-repeat="roleDetail in abc.roleDetails" data-ng-selected="{{abc.adRole == abc.selectedAdRole}}"
value="{{abc.adRole}}"> {{abc.roleDesc}} </option>
</select>
</tr>
As this is a dynamic generated drop downs based on ng- repeat, i want to put validations based on selection on one drop down. Please let me know how can i put this validation so that i can disable and enable any dropdown based on selection of the other. I am really stuck on this.
Use ng-disabled
and use model value of one of the dropdowns to disable/enable the other.
Example app:
angular.module('app', []).controller('MyController', function($scope){
$scope.dropdownSelections = {};
$scope.dropdownA = [
{value: 1, label: 'Item A1'},
{value: 2, label: 'Item A2'},
{value: 3, label: 'Item A3'},
{value: 4, label: 'Item A4'}
];
$scope.dropdownB = [
{value: 1, label: 'Item B1'},
{value: 2, label: 'Item B2'},
{value: 3, label: 'Item B3'},
{value: 4, label: 'Item B4'}
];
$scope.dropdownC = [
{value: 1, label: 'Item C1'},
{value: 2, label: 'Item C2'},
{value: 3, label: 'Item C3'},
{value: 4, label: 'Item C4'}
];
});
Example template code:
<div ng-controller="MyController">
<div>Dropdown selections: {{dropdownSelections}}</div>
<div>
<legend>Dropdown A</legend>
<select name="A" id="A" ng-model="dropdownSelections.dropdowA" ng-options="item.value as item.label for item in dropdownA"></select>
</div>
<div>
<legend>Dropdown B</legend>
<select name="B" id="B" ng-model="dropdownSelections.dropdowB" ng-options="item.value as item.label for item in dropdownB" ng-disabled="dropdownSelections.dropdowA !== 2"></select>
</div>
<div>
<legend>Dropdown C</legend>
<select name="C" id="C" ng-model="dropdownSelections.dropdowC" ng-options="item.value as item.label for item in dropdownC" ng-disabled="dropdownSelections.dropdowB !== 3"></select>
</div>
</div>
DropdownB will be enabled when DropdownA has option 2 selected. DropdownC will be enabled when DropdownB has option 3 selected. Of course this is only basic example, the code is not perfect, but demonstrates the idea.
I've created working example in this JSFiddle.
More information about ng-disabled can be found in this doc.
这篇关于Angularjs 禁用下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!