在Angular中為相同Items的其他Select Option字段禁用所選項

Question

我一直在努力奮斗......我目前正在使用Angular。

假設我們有五個選擇選項字段，我們正在迭代每個選項字段的相同列表。

我們的選擇是：

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

如果我選擇一個，如何禁用剩余選擇選項字段的選定選項？ 如果我轉到另一個選擇選項字段並選擇一個可用項目，則會為所有其他字段禁用該項目。

任何幫助甚至指導如何做到這一點將不勝感激。 謝謝

Answer 1

您可能需要兩種可能的解決方案，具體取決於您的規范要求的禁用類型。

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>

---

2. 通過將disabled屬性設置為選項來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>

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/