AngularJS禁用下拉

问题描述

我有一个ui，其中基于一个下拉菜单的选择应禁用另一个下拉菜单.这两个下拉列表都是使用ng-repeat生成的.下面是代码示例

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}}">&nbsp;{{abc.roleDesc}}&nbsp;</option>
                </select>
</tr>

由于这是一个基于ng-repeat的动态生成的下拉列表，我想将基于选择的验证放在一个下拉列表上.请让我知道如何进行此验证，以便我可以基于其他选项的选择禁用和启用任何下拉菜单.我真的很坚持.

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.

推荐答案

使用ng-disabled并使用其中一个下拉菜单的模型值来禁用/启用另一个.

Use ng-disabled and use model value of one of the dropdowns to disable/enable the other.

示例应用程序:

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'}
  ];
});

示例模板代码:

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

当DropdownA选择了选项2时，DropdownB将被启用.当DropdownB选择了选项3时，将启用DropdownC.当然，这只是一个基本示例，代码不是完美的，但可以证明这一想法.

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.

我已经在此JSFiddle 中创建了工作示例.

I've created working example in this JSFiddle.

有关ng禁用的更多信息，请参见此 doc .

More information about ng-disabled can be found in this doc.

这篇关于AngularJS禁用下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！