Angularjs ng-repeat 从多个 select 框中删除 selected 选项

Question

使用 ng-repeat am 加载多个 select 下拉列表元素，并且每个下拉列表都加载了相同的一组值。一旦用户 select 从 select 框中选择一个选项； selected 选项不应出现在其他 select 框（选项）中。

示例：如果用户 selects select 中的选项 A：1；然后在 select: 2 或任何其他 select: N 选项 A 不应出现，反之亦然。

笨蛋：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

可以通过函数获取到嵌套的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>

控制器：

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

这是一个分叉 plunker

Angularjs ng-repeat 从多个 select 框中删除 selected 选项

Angularjs ng-repeat remove selected option from multiple select boxes

javascript

angularjs