如何使已选择的选项不在另一个 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);
    }
});