防止多个 select 具有相同的值

Question

它应该做什么

我想防止用户能够 select 在具有相同选项的多个 <select> 中两次相同的选项。

它在做什么

当 select 在第一个下拉菜单中输入一个值时，第二个下拉菜单的选项将不可见（很好）。但是当 select 在第二个下拉列表中输入一个值时（第一个已经有一个），它会删除所有 select 离子。我最终得到了 selection [null, null].

我是不是漏掉了什么？

JSFiddle

var app = angular.module('App', []);

app.controller('AppController', function($scope) {
  $scope.selected = [];
  $scope.array = [{
    id: 0,
    title: 'Option0'
  }, {
    id: 1,
    title: 'Option1'
  }, {
    id: 2,
    title: 'Option2'
  }, {
    id: 3,
    title: 'Option3'
  }];
});

app.filter('arrayFilter', function() {
  return (arr, remove, keep) => {
    return arr.filter((item) => {
      for (var i in remove) {
        if (remove[i] == item.id) {
          // If checking current selected, return true
          if (i == keep) {
            return true;
          }
          // Otherwise, current item is selected, return false
          return false;
        }
      }
      return true;
    });
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>

<div ng-app="App" ng-controller="AppController">
  <select ng-model="selected[0]" ng-options="option.id as option.title for option in array | arrayFilter:selected:0 track by option.id"></select>
  <select ng-model="selected[1]" ng-options="option.id as option.title for option in array | arrayFilter:selected:1 track by option.id"></select>
  {{ selected }}
</div>

更多问题

对于这种行为，我应该使用 ng-repeat 和 ng-hide 而不是 ng-options 和 filter 吗？

在这种情况下，最佳做法是什么？

Answer 1

我终于找到了一种方法，只需进行一些更改即可使其正常工作：

我不得不将 arrayFilter 更改为过滤器 returns true 或 false 以显示或隐藏该选项。 HTML 中的语法从 option in array | arrayFilter 更改为 option in array | filter:arrayFilter。
我不得不删除 track by option.id

我认为问题主要出在旧过滤器返回一个新数组，这使得 ng-model 失去了对所选元素的引用。

JSFiddle

var app = angular.module('App', []);

app.controller('AppController', function($scope) {
  $scope.selected = [];
  $scope.array = [{
    id: 0,
    title: 'Option0'
  }, {
    id: 1,
    title: 'Option1'
  }, {
    id: 2,
    title: 'Option2'
  }, {
    id: 3,
    title: 'Option3'
  }];
  $scope.arrayFilter = function(selectionArray, position) {
    return function(item, index) {
      return selectionArray.indexOf(item.id) == -1 || item.id == selectionArray[position];
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>

<div ng-app="App" ng-controller="AppController">
  <select ng-model="selected[0]" ng-options="option.id as option.title for option in array | filter:arrayFilter(selected, 0)"></select>
  <select ng-model="selected[1]" ng-options="option.id as option.title for option in array | filter:arrayFilter(selected, 1)"></select>
  {{ selected }}
</div>

防止多个 select 具有相同的值

Prevent multiple select to have the same value

javascript

angularjs

ng-repeat

ng-options

angular-filters