Angularjs禁用下拉答案

【问题标题】：Angularjs disabling drop downAngularjs禁用下拉
【发布时间】：2016-03-21 16:39:18
【问题描述】：

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

<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 的动态生成的下拉列表，我想将基于选择的验证放在一个下拉列表中。请让我知道如何进行此验证，以便我可以根据选择的其他选项禁用和启用任何下拉列表。我真的被困在这上面了。

【问题讨论】：

使用ng-disabled 并使用下拉列表之一的模型值来禁用/启用另一个。文档：docs.angularjs.org/api/ng/directive/ngDisabled
你的第二个下拉列表是什么样的？它是否具有您希望禁用的表达式的 ng-disabled？
这是一个循环，我正在动态生成下拉列表。所以 ng-disabled 的相同表达式将应用于所有这些。 @scareddragon 当它们在循环下时，我如何使用下拉列表的模型值
@MonishDas 我已经用示例和 JSFiddle 添加了答案。希望对您有所帮助。

标签： angularjs angularjs-ng-repeat ng-repeat angular-ngmodel angularjs-ng-model

【解决方案1】：

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

示例应用：

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。当然这只是一个基本的例子，代码并不完美，只是演示了这个想法。

我在this JSFiddle 中创建了工作示例。

更多关于 ng-disabled 的信息可以在doc找到。

【讨论】：