javascript - 如何在用户选择其他选项时删除选项

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

我已经 fork 了你的 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> 的所有 的变量这是拉 - 你想为每个人单独改变它，我在这里通过传递 index 来完成函数的变量。