Отключить параметр внутри тега выбора в форме AngularJS

Question

У меня есть форма, в которой есть два выбора. Я хотел бы добиться, чтобы, если в первом выборе была выбрана опция «Любой», отключить одну из опций в другом выборе.

Итак, прямо здесь, если выбрано «Any» (часть vm.scriptTypes, vm - контроллер):

<select name="scriptType" id="scriptType" class="form-control" required
        ng-model="vm.rule.scriptType"
        ng-options="option.name as option.name for option in vm.scriptTypes">
</select>

Отключить «Комбинированный запрет» в vm.actions (ng-options) («Комбинированный запрет» является частью vm.actions, это объект, который имеет клавиши «type» и «command»)

<select name="action" id="action" class="form-control" required
        ng-model="vm.rule.action"
        ng-change="vm.rule.action "
        ng-options="(option.type + ' ' + option.command) as (option.type + ' ' + option.command) for option in vm.actions">
</select>

Заранее благодарим за любую помощь, которую вы можете оказать.

Answer 1

Почему бы вам не попробовать теги option внутри select? Например:

<select name="action" id="action" class="form-control" required
    ng-model="vm.rule.action"
    ng-change="vm.rule.action "
    ng-options="(option.type + ' ' + option.command) as (option.type + ' ' + option.command) for option in vm.actions">
    <option value="{{option.type + ' ' + option.command}}" ng-disabled="option.type == 'Combination ban' && vm.rule.scriptType == 'Any'">{{option.type + ' ' + option.command}}</option>
</select>

Пожалуйста, дайте мне знать, если это не работает. Я не проверял это все же.

Answer 2

Вы можете использовать аргумент disable when в своих ngOptions https://docs.angularjs.org/api/ng/directive/ngOptions

<div ng-app="TestApp" ng-controller="TestController">
  <select name="scriptType" id="scriptType" class="form-control" required
          ng-model="rule.scriptType"
          ng-options="option.name as option.name for option in scriptTypes">
  </select>
  <select name="action" id="action" class="form-control" required
        ng-model="rule.action"
        ng-change="rule.action "
        ng-options="(option.type + ' ' + option.command) as (option.type + ' ' + option.command) disable when (rule.scriptType == 'Any' && option.type == 'Combination ban') for option in actions">
</select>
</div>

ЯШ:

var app = angular.module('TestApp', []);

app.controller('TestController', function($scope) {
  $scope.scriptTypes = [{
    name: 'Any'
  },
  {
    name: 'ron'
  },
  {
    name: 'ron2'    
  }];
  $scope.actions = [{
    type: 'type1',
    command: 'cmd1',
  },
  {
    type: 'type2',
    command: 'cmd2',
  },
  {
    type: 'Combination ban',
    command: 'Combination ban',
  }];
});

https://jsfiddle.net/ojzdxpt1/59/