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