Question

所以问题的概述;我正在从api中检索数据并为其创建一个CRUD页面。数据有一组用户可以选择的标签。

下面是代表我的问题的代码示例。用户选择的标签由user.labels关系表示，可选择的总可用标签由user.parent.grandparent.labels表示。

我可以同步选择。我似乎无法弄清楚如何摆脱已经从任何其他后续选择字段的选项列表中选择的选项。

＆＃13;

angular.module('app', [])
  .controller('select', ['$scope', '$filter', '$location',
    function($scope, $filter, $location) {
      $scope.user = {
        "parent": {
          "grandparent": {
            "labels": [{
              "id": 28,
              "name": "Label 1",
            }, {
              "id": 17,
              "name": "Label 2",
            }, {
              "id": 39,
              "name": "Label 3",
            }, {
              "id": 77,
              "name": "Label 4"
            }, {
              "id": 100,
              "name": "Label 5"
            }]
          }
        },
        "labels": [{
          "id": 28,
          "name": "Label 1",
          "meta": {
            "score": 3
          }
        }, {
          "id": 17,
          "name": "Label 2",
          "meta": {
            "score": 5
          }
        }]
      };
    }
  ]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="select">
  <div ng-repeat="label in user.labels track by $index">
    <div class="form-field">
      <span>Label</span>
      <select ng-model="user.labels[$index]" ng-options="department.name for department 
                        in user.parent.grandparent.labels track by department.id">
      </select>
    </div>
    <div>
      <span>Score</span>
      <select ng-model="label.meta.score">
        <option value="1">1 (lowest)</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5 (highest)</option>
      </select>
    </div>
  </div>
  <button ng-click="user.labels.push({})">Add Label</button>
</div>

＆＃13;

Answer 1

您可以在ng-repeat中使用过滤器功能来实现此目的，下面是一个示例Codepen，向您展示如何：

http://codepen.io/anon/pen/ZYveOo

您需要在重复定义中传递过滤器：

<select ng-model="user.labels[$index]" ng-options="department.name for department in user.parent.grandparent.labels | filter:removeSelected track by department.id ">

在范围上引用此功能：

      $scope.removeSelected = function(val){
        return !_.find($scope.user.labels, function(label) {
          return label.id === val.id;
        });
      };

尽管如此，我认为您缺少一个用例，即您希望能够在选项中包含当前选定的标签，通过删除所有选定的选项，您将删除该功能。

<强>更新

好的，所以在给出了一些想法之后我想出了以下过滤器，它可以进行优化，但似乎按预期工作：

.filter('duplicatesFilter', function() {
        return function(items, index, selected) { 
          var res = [selected[index]];
          _.forEach(items, function(item){
            if(!_.find(selected, function(label) {
              return label.id === item.id;
            })){
              res.push(item);
            }
          });

          return res;
        };
    })

像这样使用它：

<select ng-model="user.labels[$index]" ng-options="department.name for department in user.parent.grandparent.labels | duplicatesFilter:$index:user.labels track by department.id "></select>

这是我几次见过的事情，每次我都在努力。如果我能找到一个更好地解决问题的自定义过滤器，我会稍后看一看，如果我不能，我将整理这个代码并释放一个;但是这对你的用例来说应该是好的。

工作代码笔：

http://codepen.io/anon/pen/ZYveOo

Angular ng重复多个选择字段，而不通过ng-options显示已选择的数据

1 个答案: