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

Question

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

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

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

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 
 
      } 
 
     }] 
 
     }; 
 
    } 
 
    ]);

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

Answer 1

您可以使用过滤器功能的NG-重复来实现这里面，这里是你展示如何样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