为相同项目的其他选择选项字段禁用 Angular 中的选定项目答案

【问题标题】：Disabled selected item in Angular for other Select Option Fields of the same Items为相同项目的其他选择选项字段禁用 Angular 中的选定项目
【发布时间】：2015-02-11 17:23:25
【问题描述】：

我已经为此苦苦挣扎了一段时间......我目前正在使用 Angular。

假设我们有五个选择选项字段，并且我们正在为每个选项遍历相同的列表。

我们的选择是：

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

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

任何有关如何执行此操作的帮助甚至指导都将不胜感激。谢谢

【问题讨论】：

所以您仍然希望在选择选项字段中看到它们，但当它们已被任何其他选择选项字段采用时无法选择？
您在寻找这样的东西吗？ plunker remove item 或 plunker disabled item
我会将其标记为最佳答案，但这是一条评论。
那我就回答吧:)

标签： angularjs angularjs-ng-repeat ng-options

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

DEMO

Javascript

  .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;
    };
  });

HTML

<select
  ng-repeat="(selectIndex, itemValue) in Demo.items"
  ng-model="Demo.data[selectIndex]">

  <option value="" ng-selected="Demo.data[selectedIndex] == item">
    Select Number  
  </option>

  <option ng-repeat="item in Demo.items"
          value="{{item}}"
          ng-disabled="item | hasIntersection:Demo.data"
          ng-selected="Demo.data[selectIndex] == item">
    {{item}}
  </option>

</select>

【讨论】：

您的回答很棒@ryeballar 我们如何使用Angularjs 进行多选。

【解决方案2】：

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

【讨论】：

您正在将视图信息（禁用信息）放入模型中。该信息不在模型下方。
最好有ng-disabled="option == model[0]"
还要注意，不使用 ng-options 意味着你只会得到
Enzey, 'option == model[0]' - 这仅适用于 2 个下拉菜单，问题约为 5。我认为禁用模型是 100% 可以的，因为它会动态变化。您可以使用

【解决方案3】：

您可以使用 ng-disabled。

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

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

【讨论】：