Как сделать так, чтобы уже выбранный параметр не отображался в другом выпадающем списке выбора JAVASCRIPT / ANGULARJs

Question

Как сделать так, чтобы опция выбора не исчезала при выборе, если она отфильтрована и не отображается в других выпадающих списках. Например, если у меня есть какой-то массив объектов, и я делаю

<select ng-options = "here we go through each object "></select>

Моя идея состоит в том, чтобы создать функцию фильтра, которая бы не отображала какой-либо элемент массива, который я заполняю, если я выбрал этот элемент ранее. Так что это будет мой набор элементов, которые должны быть недоступны в других выпадающих списках. Есть ли какой-нибудь пример того, как я могу выполнить sh это? У меня есть идея, что мой фильтр будет выглядеть примерно так:

  for(var i=0;i<$scope.removedIds.length;i++){
    if(tab.tabID===$scope.removedIds[i].tabID)
      return false;
  }
  return tab;

, и это будет использоваться в параметрах ng для ex: ng-options = "tab.ID как tab.name для tab в таблицах | filter: "и в моей функции ng-change я бы добавил к $ scope.removedIds следующие значения, которые не должны быть доступны в следующих выпадающих списках. Но я думаю, что это не сработает, потому что значения будут отфильтрованы в разных выпадающих списках.

Пример

Answer 1

Полагаю, что у вас есть три раскрывающихся списка с одним и тем же источником данных, простое решение будет выглядеть так:

<div>
    <select ng-model="selectedItem1" ng-options="item1 for item1 in options1"></select>
    <select ng-model="selectedItem2" ng-options="item2 for item2 in options2"></select>
    <select ng-model="selectedItem3" ng-options="item3 for item3 in options3"></select>
</div>

В соответствующем контроллере и с использованием angularjs наблюдателей добавьте следующие строки:

$scope.options1 = ["opt1","opt2","opt3"];
$scope.options2 = angular.copy($scope.options1);
$scope.options3 = angular.copy($scope.options1);

$scope.$watch("selectedItem1", function(nv, ov) {
    if (nv != ov) {
        $scope.options2.splice($scope.options2.indexOf(nv),1);
        $scope.options3.splice($scope.options3.indexOf(nv),1);
    }
});
$scope.$watch("selectedItem2", function(nv, ov) {
    if (nv != ov) {
        $scope.options1.splice($scope.options1.indexOf(nv),1);
        $scope.options3.splice($scope.options3.indexOf(nv),1);
    }
});
$scope.$watch("selectedItem3", function(nv, ov) {
    if (nv != ov) {
        $scope.options1.splice($scope.options1.indexOf(nv),1);
        $scope.options2.splice($scope.options2.indexOf(nv),1);
    }
});