动态禁用 ng-options 值

Question

我想禁用循环中的选择选项。到目前为止，我已经在以下链接中实现了。我想要它的工作方式，但我已经编写了很长的代码。有没有其他的实现方式。

Code 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

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 函数基于“如果它有一个索引它正在使用并因此被禁用”返回一个布尔值

Answer 2

您的禁用方法非常简单且常见。您可以使用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';
}