0

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

代码链接

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

2 回答 2

1

带有禁用行的 ng-options有一些关于如何使用带有禁用选项的 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函数基于“如果它有一个索引它正在使用并因此禁用”返回一个布尔值

于 2016-06-29T13:11:31.607 回答
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';
}
于 2016-06-29T12:55:18.270 回答