Question

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

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

动态禁用ng-options值

2 个答案: