禁用了Angular中针对同一项目的其他Select Option字段选择的项目 [英] Disabled selected item in Angular for other Select Option Fields of the same Items

问题描述

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

I've been struggling on this for a while... I'm currently using Angular.

比方说，我们有五个选择选项字段，并且我们正在为每个列表遍历相同的列表.

Let's say we have five select option fields and that we are iterating through the same list for each one.

我们的选择是:

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

如果我选择一个，我将如何为其余的选择选项字段禁用选择的选项? 如果我转到另一个选择选项字段并选择一个可用的项目，那么它将禁用所有其他字段的该项目.

If I choose one, how would I disable the selected option for the remaining select option fields? And if I go to another select option field and select an available item, it then disables that item for all the other fields.

任何帮助或什至指导如何做到这一点，将不胜感激.谢谢

Any help or even guidance on how to do this would be appreciated. Thanks

推荐答案

您可能需要两种可能的解决方案，这取决于禁用规范所需的方式.

There are two possible solutions that you may want, and it depends on what kind of disabling your specs require.

1. 通过删除已经从其他 select 元素中选择的项目来禁用.此解决方案需要一个过滤器，该过滤器将删除除已选择当前 select 标签的当前项目以外的所有已选择项目.

1. Disable by removing the items that are already selected from other select elements. This solution requires a filter that removes the items that has already been selected except for the current item that the current select tag has selected.

演示

DEMO

Javascript

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

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>

---

1. 通过为选项项设置 disabled 属性来禁用，这实际上是解决问题的一种复杂方法，因为它不使用标准角度 select ng-option语法.通过使用ng-repeat遍历项目并添加ng-disabled表达式，该表达式可将当前所选项目与其他 select 元素中的其他所选项目进行比较.

1. Disable by setting a disabled property to the option items, this is actually a complex way of solving the problem as it does not use the standard angular select ng-option syntax. By using an ng-repeat to iterate over items and add an ng-disabled expression that evaluates the current selected item against other selected items from other select elements.

演示

DEMO

Javascript

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

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>

这篇关于禁用了Angular中针对同一项目的其他Select Option字段选择的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！