Angularjs ng-repeat 從多個 select 框中刪除所選選項

Question

使用 ng-repeat 加載多個 select 下拉列表元素，每個下拉列表都加載了相同的一組值。 一旦用戶從 select 框中選擇了一個選項； 所選選項不應出現在其他 select 框（選項）中。

示例：如果用戶從 select 中選擇選項 A：1； 然后在 select: 2 或任何其他 select: N 選項 A 不應出現，反之亦然。

Plunker： https://plnkr.co/edit/yCFIanCXPece49dk?open=lib%2Fscript.js&deferRun=1&preview

代碼：

 <option ng-repeat="option in data.availableOptions | filter:arrayFilter(select.selectedOption,$index)" value="{{option.id}}">

   $scope.arrayFilter = function(selectionArray, position) {
    return function(item, index) {
      return selectionArray.indexOf(item.id) == -1 || item.id == selectionArray[position];
    }
  }

Answer 1

您可以使用 function 獲取嵌套 ng-repeat 的選項，然后過濾掉不是當前選項並被選中的選項：

html：

<select name="repeatSelect{{$index}}" id="repeatSelect{{$index}}" ng-model="select.selectedOption">
  <option
    ng-repeat="option in getAvailableOptions(select.selectedOption)"
    value="{{option.id}}"
  >
    {{option.name}}
  </option>
</select>

controller：

$scope.getAvailableOptions = function(current) {
  return this.data.availableOptions.filter((o) => o.id === current || !this.data.availableSelect.some(s => s.selectedOption === o.id));
};

這是一個分叉的plunker