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＆amp;中删除选项D1。 3.在第二个中选择D2，从下拉1和2中删除D2。 3，只需选择一个D3就可以下拉3。

Here's指向我的代码的链接：

Answer 1

我已经分叉了你的傻瓜，我想我有一些适合你的东西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> all index正在拉 - 你想为每个人单独改变它，我在这里通过将https://github.com/PyMVPA变量传递给函数来完成。

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

1 个答案: