Отключение с помощью Angularjs

Question

У меня есть ui, в котором на основе выбора одного раскрывающегося списка выпадающего списка следует отключить. Оба этих раскрывающихся списка создаются с использованием 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- повтор, я хочу поставить валидации на основе отбора по одной капле вниз. Пожалуйста, дайте мне знать, как я могу поставить эту проверку, чтобы я мог отключить и включить любое раскрывающееся меню, основанное на выборе другого. Я действительно застрял на этом.

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

DropdownB будет включен, когда DropdownA имеет вариант 2 выбран. DropdownC будет включен, если DropdownB выбрал вариант 3. Конечно, это только базовый пример, код не совершенен, но демонстрирует идею.

Я создал рабочий пример в this JSFiddle.

Дополнительную информацию о ng-disabled можно найти в этом doc.