动态禁用 ng-options 值

Question

我想禁用循环中的 select 选项。到目前为止，我已经实现了以下 link。它的工作方式是我想要的，但我的代码很长。还有其他实现方式吗

<div ng-controller="OptionsController">
<button value="add" ng-click="add()">
add
</button>
<div ng-repeat="val in v">
    <select ng-model="val.myColor" ng-change="call(c.name)">
        <option ng-repeat="c in colors" ng-disabled="c.shade=='dark'" value="{{c.name}}">
            {{c.name}}
        </option>
    </select>

</div>

</div>

Answer 1

您的禁用方法非常直接且常见。您可以使用 ngOptions 指令代替 option 元素，并保存一两行。控制器中的代码量与禁用该选项关系不大。

标记：

<select ng-options="c as c.name disable when disableColor(c) for c in colors track by $index" 
    ng-model="val.myColor" ng-change="c.call(c.name)">
</select>

新控制器功能：

$scope.disableColor=function(c){
    return c.shade=='dark';
}

Answer 2

ng-options with disabled rows 有一些关于如何使用禁用选项的 ng-options 的细节。

根据您当前对 ng-repeat 的使用：http://jsfiddle.net/rhz8hxL5/1/

<div ng-controller="OptionsController">
  <button value="add" ng-click="add()">
    add
  </button>
  <div ng-repeat="val in v">
    <select ng-model="val.myColor" ng-change="call()">
      <option ng-repeat="c in colors" ng-disabled="isDisabled(c)" value="{{c}}">
        {{c}}
      </option>
    </select>
  </div>
</div>

JS - 为了演示清晰起见，我对其进行了一些简化

angular.module('myApp', [])

function OptionsController($scope, $timeout) {
  $scope.v = [{
    myColor: 0
  }];

  $scope.inUse = [];
  $scope.isDisabled = function(name) {
    return $scope.inUse.indexOf(name) !== -1;
  }

  $scope.colors = ['black', 'white', 'red', 'blue', 'yellow'];

  $scope.add = function() {
        $scope.v.push({});
  }

  $scope.call = function() {
    $scope.inUse = [];

    for(var i=0; i<$scope.v.length; i++) {
      var val = $scope.v[i];

      $scope.inUse.push(val.myColor);
    }
  }
}

英文：

$scope.inUse 数组维护当前选定值的列表。当您更改下拉值时，它会调用 call 函数。该函数清空 $scope.inUse 数组并用当前选定的值重新填充它。

$scope.isDisabled 函数 returns 一个布尔值，基于“如果它有一个索引，它正在使用中，因此被禁用”

动态禁用 ng-options 值

Disable ng-options value dynamically

angularjs

angularjs-ng-options

angularjs-ng-disabled