Question

我一直在努力解决这个问题......我现在正在使用Angular。

假设我们有五个选择选项字段，我们正在为每个字段迭代相同的列表。

我们的选择是：

$scope.items = [one, two, three, four, five];

如果我选择一个，我如何禁用其余选择选项字段的选定选项？如果我转到另一个选择选项字段并选择一个可用项目，则会为所有其他字段禁用该项目。

任何帮助甚至指导如何做到这一点将不胜感激。感谢

Answer 1

您可能需要两种可能的解决方案，具体取决于您的规格要求的禁用类型。

通过删除已从其他 select 元素中选择的项目来停用。此解决方案需要一个过滤器，用于删除已选择的项目，但当前 select 标记所选的当前项目除外。

<强> DEMO

<强> 的Javascript

  .controller('Ctrl', function($scope) {

    $scope.items = [1,2,3,4,5];
    $scope.data = [];

  })

  .filter('arrayDiff', function() {
    return function(array, diff) {
      var i, item, 
          newArray = [],
          exception = Array.prototype.slice.call(arguments, 2);

      for(i = 0; i < array.length; i++) {
        item = array[i];
        if(diff.indexOf(item) < 0 || exception.indexOf(item) >= 0) {
          newArray.push(item);
        }
      }

      return newArray;

    };
  });

<强> HTML

<select 
  ng-repeat="(modelIndex, itemValue) in items track by modelIndex"
  ng-model="data[modelIndex]"
  ng-options="item for item in $parent.items | arrayDiff:data:data[modelIndex]">
  <option value="">Select Number</option>
</select>

通过为选项设置 disabled 属性来禁用，这实际上是一种解决问题的复杂方法，因为它不使用标准的角度 {{1} } select语法。通过使用ng-option迭代项目并添加ng-repeat表达式，该表达式会根据其他 ng-disabled 元素中的其他所选项目评估当前所选项目。

<强> DEMO

<强> 的Javascript

select

<强> HTML

  .controller('Ctrl', function($scope) {

    this.items = ['1', '2', '3', '4', '5'];
    this.data = [];

  })

  .filter('hasIntersection', function() {
    return function(item, array) {
      return array.indexOf(item) >= 0;
    };
  });

Answer 2

ng-disabled在这里是你的朋友，不过我认为你可能在IE中遇到动态选择的一些问题。 http://plnkr.co/edit/Ca6l2sHjN2PRykidm9kx?p=preview

Answer 3

您可以使用ng-disabled。

<select ng-options="item in items" ng-model="selectedItem" ng-disabled="selectedItem"></select>

这里的工作示例：http://jsfiddle.net/astrojason/4njwhdua/

在Angular中为相同Items的其他Select Option字段禁用所选项

3 个答案: