Angular Dropdown mit Abhängigkeiten von der ersten Dropdown-Liste

Question

Ich habe zwei Dropdown-Felder, wobei die zweite von der Auswahl in der ersten abhängt.

Die Daten für das erste Dropdown stammen aus einem Datensatz. Es listet die mit einem Konto ng-repeat="option in acctList" verbundene Nummer auf: 1, 4 und 7. Ich möchte zu einem anderen Datensatz wechseln, die übereinstimmenden Kontonummern finden und dann die Kunden anzeigen, die mit diesem Konto verknüpft sind. (Konto 1 hat Kunden 1-2, Konto 4 hat Kunden 3-4 und Konto 7 hat Kunden 5-7). Das zweite Dropdown sollte nichts (leer) anzeigen, wenn in der ersten nichts ausgewählt wurde.

Hier ist mein Plunker mit dem beide Drop-downs:

angular.module("app", []) 
    .controller("MainCtrl", function($scope) { 
    $scope.test = "This is a test"; 
    $scope.defnum = 1; 
    $scope.acct_info = [ 
     { 
     "Req": "MUST", 
     "DefCom": "1" 
     }, 
     { 
     "Req": "NoMUST", 
     "DefCom": "5" 
     }, 
     { 
     "Req": "MUST", 
     "DefCom": "4" 
     }, 
     { 
     "Req": "MUST", 
     "DefCom": "7" 
     } 
    ]; 

    $scope.cust_info = [ 
     { 
     "Customer": "1", 
     "Com": "1" 
     }, 
     { 
     "Customer": "2", 
     "Com": "1" 
     }, 
     { 
     "Customer": "3", 
     "Com": "4" 
     }, 
     { 
     "Customer": "4", 
     "DefCom": "4" 
     }, 
     { 
     "Customer": "5", 
     "DefCom": "7" 
     }, 
     { 
     "Customer": "6", 
     "DefCom": "7" 
     }, 
     { 
     "Customer": "7", 
     "DefCom": "7" 
     } 
    ]; 
    }); 

I ng-repeat="option in cust_info | filter:{ Com : filter.DefCom }" den zweiter auf dem SO beantworten zu filtern, um zu versuchen hinzugefügt: Filter ng-options from ng-options selection Aber es ist http://plnkr.co/edit/jDitkge1rx6GJzkdElJO?p=preview

Hier mein Controller ist funktioniert nicht. Ich habe versucht mit ng-change, aber ich denke, es sollte ein einfacher Weg, wie ein filter oder track by sein. Ich frage mich auch, ob ich von ng-repeat zu ng-option wechseln sollte. Jeder hat Einblick in eine einfache Möglichkeit, dies zu tun? Das funktioniert nicht, im Beispiel

Answer 1

Verwenden ng-if in Ihrem zweiten <option> Tag, kann es ist, was auch immer Sie

<select> 
    <option ng-selected="defnum == option.DefCom" ng-repeat="option in acct_info | filter:{Req:'MUST'}:true"> 
     {{ option.DefCom }} 
    </option> 

    </select> 
    <select> 
    <option ng-if="option.DefCom" ng-selected="" ng-repeat="option in cust_info"> 
     {{ option.Customer}} 
    </option> 

    </select>