Nächste Dropdown-Werte basierend auf dem bereits ausgewählten Wert filtern

Question

Ich habe ein Dropdown mit vier Optionen. Ich wähle die erste Option als 'John (1)' und füge eine Zeile hinzu. Nun sollte das nächste Dropdown-Menü nur drei Optionen im Dropdown-Menü anzeigen, dh es sollte den Wert des vorherigen Dropdown-Wertes "John (1)" ausschließen. In der nächsten Zeile zum Hinzufügen sollten die vorherigen zwei ausgewählten Dropdown-Werte ausgeschlossen werden. Kann dies erreicht werden? Vielen Dank im Voraus. Unten ist die Geige.

<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

einen Filter auf Ihre ng-repeat, um hinzufügen allready hinzugefügt Objekte zu vermeiden:

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

Ihre html wie folgt aussehen:

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

Hinweis Hinweis: Ersetzen Sie die ng-repeat-Anweisung für ng-Optionen für ein Selektorelement.