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