当用户选择其他选项时如何删除选项

Question

我正在尝试根据其他下拉菜单中的选择从下拉菜单中删除选项。

例如，在页面加载时，我有一个下拉菜单和一个允许创建另一个下拉菜单的按钮。

我的操作代码：

<div class="form-inline" ng-repeat="setting in sensor.settings">
<select class="form-control" ng-model="setting.port" ng-options="item.name group by item.type for item in ports track by item.name">
  <option value="">-- Module Port --</option>
</select>
</div>

<a href ng-click="newItem($event, sensor.settings)">New Port</a>

预期结果：

如果只有一个下拉菜单，用户可以选择其中的任何选项，无需执行额外的逻辑。

但是，如果单击“新端口”按钮，则会创建其他下拉菜单，其中的选项与第一个、第二个等相同... 我要做的是从未选择该选项的选项中删除在任何下拉列表中选择的选项，以防止重复选择。

例如，如果我有 3 个下拉菜单，并且所有下拉菜单的可用选择是 D1、D2 和 D3；用户为第一个选择 D1，这会从下拉列表 2 和 3 中删除选项 D1。在第二个中选择 D2，这会从下拉列表 1 和 3 中删除 D2，而下拉列表 3 中只有一个 D3 选择。

Here's 我的代码链接：

Answer 1

我已经分叉了你的 plunker，我想我有一些适合你的东西here。

重要的是我根据您当前查看的索引更改了ng-options 以使用过滤的端口列表。 （我更改了ng-repeat 也跟踪索引）：

<div class="form-inline" ng-repeat="(index, setting) in sensor.settings">
  <select class="form-control" ng-model="setting.port" ng-options="item.name group by item.type for item in filteredPorts(index) track by item.name" ng-change="updateAll(index)">
    <option value="">-- Module Port --</option>
  </select>
</div>

然后我将filteredPorts 实现为一个函数，该函数采用索引并过滤掉所有其他选定的端口并仅返回那些作为可能的选项：

$scope.filteredPorts = function(index) { 
  // Filter out anything that's currently selected elsewhere
  var currentSelections = [];
  $scope.sensor.settings.forEach(function(value, idx) { 
    if (index !== idx) { currentSelections.push(value.port); } // if statement enforces "elsewhere"
  });

注意，我还定义了一个数组 diff 方法，在上面的代码中使用：

Array.prototype.diff = function(a) {
  return this.filter(function(i) {return a.indexOf(i) < 0;});
}; // from http://stackoverflow.com/questions/1187518/javascript-array-difference

  return $scope.ports.diff(currentSelections);
}

我还更改了newItem 函数，只创建一个新项目而不进行任何过滤：

$scope.newItem = function($event, sensorSetting) {
  $scope.sensor.settings.push({
    port: '',
    room: '',
    device: ''
  });
  $event.preventDefault();
}

最后，以防万一，我添加了一个处理任何重复项的ng-click 处理程序，但这应该是不可能的，因此可能会被忽略。

为了解释为什么它首先不起作用以及这里的主要区别是什么，您正在更改 $scope 变量，所有 <select>s 从中提取 - - 您想为每个单独更改它，我在这里通过将index 变量传递给函数来完成。