为相同项目的其他选择选项字段禁用 Angular 中的选定项目 [英] 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 标记已选择的当前项目之外的已选择项目.

演示

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>

<小时>

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.

演示

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>

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