Conditional Drop-Down Bevölkerung Werte in Angular JS

Question

Ich habe zwei Dropdown-Menüs wie Gruppentypen und Untergruppentypen in meinem UI.

<div class="form-group row"> 
     <label for="GroupType" class="col-sm-4 form-control-label">Group Type: </label> 
     <div class="col-sm-8"> 
      <select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceAddRecord.populateGroupTypeDetails(selGroupType)" ng-options="groupType.value for groupType in referenceAddRecord.groupTypes track by groupCode.id" ng-model="referenceAddRecord.groupType"></select> 
     </div> 
    </div> 
    <div class="form-group row"> 
     <label for="SubGroupType" class="col-sm-4 form-control-label">Sub Group Type: </label> 
     <div class="col-sm-8"> 
      <select name="selSubGroupType" id="selSubGroupType" class="form-control" ng-change="referenceAddRecord.populateSubGroupTypeDetails(selSubGroupType)" ng-options="subGroupType.value for subGroupType in referenceAddRecord.subGroupTypes track by subGroupType.id" ng-model="referenceAddRecord.subGroupType"></select> 
     </div> 
    </div> 

Und in meinem Controller ich die Werte bin Bindung nach wie von JSON-Datei zu lesen

referenceDataDropDownService.getDropDown(REFERENCE_DATA_CONSTANTS.GROUP_TYPE).success(function (result) { 
    $scope.referenceAddRecord.groupTypes = result; 
}).error(function (result) { 
    alert("Unable to retrieve dropdown values"); 
}); 

referenceDataDropDownService.getDropDown(REFERENCE_DATA_CONSTANTS.SUB_GROUP_TYPE).success(function (result) { 

    $scope.referenceAddRecord.subGroupTypes = result; 
}).error(function (result) { 
    alert("Unable to retrieve dropdown values"); 
}); 

Jetzt will ich die Sonne Gruppentypen Werte nach unten auf ausgewählten Gruppentyp Wert in Abfall abhängig.

So zum Beispiel für die Untergruppentypen Sekunde nach unten fällt, ist das Ergebnis eine Sammlung von Objekten wie:

Und für die Gruppentypen nach unten fällt, ist das Ergebnis wie folgt aussieht:

nun nur, wenn das „Chapter-Event“ aus dem Gruppentyp Dropdown wird ausgewählt, dann für diese ID, mag ich s Wählen Sie die Werte aus den Untergruppentypen Dropdown, wobei Wert die ID (5) verkettet hat.

Wie 'Auction' sollte als Wert 'Auction | 5' angezeigt werden. Ebenso sollten Werte angezeigt werden.

Wie würde ich das tun?

Außerdem wird beim Laden standardmäßig jeder Gruppentyp ausgewählt, und der Untergruppentyp sollte entsprechend ausgefüllt werden.

Bitte helfen.

Answer 1

Wenn ich Ihre Frage verstehe, versuchen Sie, die Optionen einer Auswahl basierend auf der Auswahl aus einer anderen zu filtern. Um dies zu tun, fügen Sie einfach einen Filter zur ng-options-Direktive bei der zweiten Auswahl hinzu. Wie folgt aus:

ng-options="subGroupType.value for subGroupType in referenceAddRecord.subGroupTypes | filter: {id: referenceAddRecord.groupType.id} track by subGroupType.id" 

Hier ist ein Arbeits plunk