如何使已選擇的選項不在另一個 select 選項下拉 JAVASCRIPT/ANGULARJs 中顯示

Question

如何使 select 選項在被過濾后不會消失並且不會顯示在其他 select 下拉列表中。 例如，如果我有一些對象數組，並且我制作

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

我的想法是制作過濾器 function 如果我之前選擇了這個項目，它不會顯示我正在填充的數組中的任何項目。 所以這將是我在另一個下拉列表中應該不可用的項目數組。 有沒有一些示例方法我可以如何做到這一點？ 我有一個想法，我的過濾器看起來像這樣：

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

這將用於 ng-options for ex: ng-options="tab.ID as tab.name for tab in tables | filter: " 和我的 function ng-change 我將添加到 $scope.removedIds 下一個值這在下一個 select 下拉列表中不應該可用。 但我認為它不起作用，因為值會在不同的 select 下拉列表中被過濾掉。

例子

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>

在相應的 controller 中，並使用 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);
    }
});