Отфильтровать следующие выпадающие значения на основе уже выбранного значения

Question

У меня есть выпадающий список с четырьмя вариантами. Я выбираю первый вариант как «Джон (1)» и добавляю строку. Теперь следующий выпадающий список должен показывать только три варианта в выпадающем меню, т. Е. Он должен исключать значение предыдущего выпадающего выбранного значения, которое является «John (1)». В следующей строке добавления он должен исключать два предыдущих значения выпадающего списка. Это может быть достигнуто. Заранее спасибо. Ниже - скрипка.

<div ng-app ng-controller="LoginController"> 
    <table class="table table-striped"> 
    <thead> 
     <tr> 
      <th>Description</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="mapping in viewTemplateRow"> 
      <td> 
       <select class="form-dropdown" id="templateId" ng-model="mapping.id"> 
        <option value="">Please Select...</option> 
        <option ng-repeat="option in viewTemplateData" value="{{option.id}}" ng-selected="{{option.id == mapping.id}}" ng-model="viewTemplateData">{{option.name}} ({{option.id}})</option> 
       </select> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<button type="button" class="button button-compact" ng-click="addRow();">Add New Row</button> 
</div> 

https://jsfiddle.net/Lt7aP/3787/

Answer 1

Добавить фильтр в нг-повтор, чтобы избежать Allready добавленных объектов:

$scope.notSelected = function(item){ 
     for (var i in $scope.viewTemplateRow){ 
      if ($scope.viewTemplateRow[i].id==item.id) 
      return false 
     } 
     return true; 
    } 

Вашего HTML будет выглядеть следующим образом:

<option ng-repeat="option in viewTemplateData | filter: notSelected" value="{{option.id}}" ng-selected="{{option.id == mapping.id}}" ng-model="viewTemplateData">{{option.name}} ({{option.id}})</option> 

Примечания : Рассмотрим замену директивы ng-repeat для ng-опций для элемента селектора.