AngularJS：ngRepeat 用于在更改 ngOptions-list 时进行选择

Question

我有一个 angularjs 应用程序，它有一个使用 ngOptions 填充了数组选项的选择。每次用户单击按钮添加一个时，ngRepeat 指令都会在底部生成一个新的选择。

我想确保用户不能选择重复的值。

所以如果我的列表包含 3 个项目：Item1、Item2 和 Item3，并且用户选择 Item3 然后按下按钮，最后生成的选择列表应该只包含项目“Item1”和“Item2”。 如果用户随后选择“Item1”并按下按钮，用户应该会看到仅使用“Item2”选项生成的下一个选择。

所以一般来说，在上面的例子中，生成的 HTML 应该是这样的：

<div data-ng-repeat="item in selectedOptions">
  <select>
    <option value="1">Item1</option>
    <option value="2">Item2</option>
    <option value="3">Item3</option>
  </select>

 <select>
  <option value="1">Item1</option>
  <option value="2">Item2</option>
 </select>

 <select>
  <option value="2">Item2</option>
 </select>
</div> 

请记住：用户将一直看到所有三个选项，一次是每个选项都可用，一次是只有两个选项可用，一次是只有一个选项可用。

我一直在想很多方法来完成这项工作，但到目前为止我还没有运气。有谁知道我可以在角度中使用的模式来实现这种行为？

这是我迄今为止尝试过的。

<div data-ng-repeat="function in item.Functions">
    <select data-ng-model="function.Id" data-ng-options="j.Id as j.Name for j in getCorrectFunctions(functionsList)">
        <option selected="selected" value="">---</option>
     </select>

     <a data-ng-click="addFunction()">
        <i class="fa fa-plus fa-plus-lower"></i>
     </a>
</div>

在我的指令代码中，我有以下功能：

  function getCorrectFunctions(functionList) {
                var item = scope.item;

                var list = functionList.slice();

                //excluded for brevity: this was a loop which would remove every item that wasn't available anymore

                return list;
            }

我认为这将对列表中的每个项目执行一次，但似乎并非如此。 我不认为应用过滤器会有什么不同，不是吗？

Answer 1

以下是对此的一种看法。这不支持动态添加新功能，但它确实阻止用户选择任何给定项目两次。

有关工作示例和更多详细信息，请参阅 Plunker。

首先是 Angular 设置部分。在这里，我定义了一个函数对象的模拟数组 ($scope.functions) 和用于用户选择的数组 ($scope.selected)

var app = angular.module('app', []);

app.controller('SelectCtrl', function ($scope) {
  $scope.functions = [
    {id: 1, name: 'First'},
    {id: 2, name: 'Second'},
    {id: 3, name: 'Third'},
  ];
  $scope.selected = [];

  $scope.selectedFilter = function (selectNumber) {
    // snipped for now
  };
});

在 html 中，仅显示一个选择，但对所有 3 个选择使用类似的方法：将所选值设置为给定索引中的 selected 数组（0 用于下面显示的情况），并使用 selectedFilter 来用相同的索引值过滤functions。

  <select ng-options="j.id as j.name for j in functions | filter:selectedFilter(0)" ng-model="selected[0]">
    <option value="" selected="selected">---</option>
  </select>

最后是过滤功能。它为所有未选择的函数返回true和为给定选择的选定函数。

  $scope.selectedFilter = function (selectNumber) {
    return function (func) {
      if ($scope.selected.length === 0) {
        return true;
      } else {
        var unselectedFunctions = _.filter($scope.functions, function (fn) {
          return _.findIndex($scope.selected, function (sel) {
            return fn.id === sel;
          }) === -1;
        });
        var selectedForCurrentId = $scope.selected[selectNumber];
        var selectedForCurrent = _.find($scope.functions, {id: selectedForCurrentId});
        return func === selectedForCurrent || _.findIndex(unselectedFunctions, {id: func.id}) > -1;
      }
    };
  };

在这里，我使用了Lodash 来实现一些不错的辅助功能。与 Lodash 没有任何关联，但我真的建议你看看它，或者任何其他类似的库。

希望这可以帮助您继续前进！