Question

我有一个angularjs应用程序，它使用ngOptions从arry填充选项。每次用户单击按钮添加一个按钮时，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设置部分。这里我定义了一个模拟的函数对象数组（git checkout <insert_new_branch_name_here>）和用于用户选择的数组（$scope.functions）

$scope.selected

在html中，只显示一个选择但用于所有3个选择的类似方法：将所选值设置为给定索引中的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 }; });数组（selected，如下所示），并使用0以相同的索引值过滤selectedFilter。

functions

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

  <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>

这里我使用了Lodash来获得一些不错的帮助函数。与Lodash没有任何关联，但我真的建议你看看它，或任何其他类似的库。

希望这有助于您继续前进！

AngularJS：ngRepeat for select on change ngOptions-list

1 个答案: