Angularjs ng-modell komplexe verbindung zwischen zwei auswahltags

Question

Ich habe eine json enthält eine liste von fahrzeugtrends und dort entsprechende modelle.

var availables = { 
    "trends": [ 
    {"label": "ALFA ROMEO"} 
    ], 
    "models": { 
    "ALFA ROMEO": [ 
     {"label": "159"}, 
     {"label": "4C"}, 
     {"label": "AR8C SPIDER"}, 
     {"label": "BRERA"}, 
     {"label": "GIULIETTA"}, 
     {"label": "MITO"}, 
     {"label": "SPIDER"}] 
    } 
} 

Ich möchte, dass sie select in zwei angezeigt werden soll. Die erste Auswahl muss die zweite Bedingung konditionieren. Ich mochte das und es funktioniert gut. Wenn ich einen Trend auswähle, zeigt mir der andere select nur die guten Modelle.

<label class="item item-input item-select"> 
    <span class="input-label">Véhicule</span> 
    <select ng-model="vehicle.trend" ng-options="trend.label for trend in trends_availables.trends"> 
    <option ng-disabled="true" ng-selected="true" value="">{{"select_trend" | translate}}</option> 
    </select> 
</label> 

<label class="item item-input item-select"> 
    <span class="input-label">Modèle</span> 
    <select ng-model="vehicle.model" ng-options="model.label for model in trends_availables.models[vehicle.trend.label]"> 
    <option ng-disabled="true" ng-selected="true" value="">{{"select_model" | translate}}</option> 
    </select> 
</label> 

Hier kommt mein Problem. wenn ich einen bereits erstellten vehicle habe, zeigt der selects nicht den guten Trend und das Modell. Als vehicle.trend ist ein Objekt, ich kann verstehen, ng-model schlägt fehl, das label Attribut zu erhalten.

Wie konnte ich die beiden select in Abhängigkeit arbeiten und der Trend/Modell zeigt die guten Etiketten?

Wenn ich eine vehicle wie diese $scope.vehicle = {"trend": {"label": "ALFA ROMEO"}, "model": {"label": "159"}}; bekomme, möchte ich die Auswahl, um die guten Informationen zu zeigen.

Answer 1

Es könnte helfen, wenn Sie ein wenig mehr erarbeiten kann, aber das codepen kann zeigen, was Sie brauchen: http://codepen.io/Findiglay/pen/mPajZB?editors=1010

ich die Auswahlmenüs slighty geändert haben, wie folgt: me

<label class="item item-input item-select"> 
    <span class="input-label">Véhicule</span> 
    <select ng-model="vehicle.trend" ng-options="trend.label for trend in availables.trends", ng-change="updateModels()"> 
     <option value=""> -- Select a Trend -- </option> 
    </select> 
    </label> 

    <label class="item item-input item-select"> 
    <span class="input-label">Modèle</span> 
    <select ng-model="vehicle.model" ng-options="model.label for model in filteredModels"> 
    </select> 
    </label> 

Lassen weiß ob das das Problem nicht genau löst und ich kann weiter helfen.

Bearbeiten: Ich habe die Antwort aktualisiert, um automatisch die verfügbaren Fahrzeuge für das ausgewählte Modell auszuwählen. Geht das jetzt auf das Problem ein, das Sie beschreiben?

Wenn Sie eine Option aus einem ausgewählten Eingangselement, das Eingang wählen Sie dann wird auf die gewählte Option

I Aktuelles zu den HTML-Code oben gemacht haben und hinzugefügt, um die folgende Funktion zu sein gefeuert mit ng-change:

/** Update Available Models when a trend is selected **/ 
    $scope.updateModels = function() { 
    if ($scope.vehicle.trend && availables.models[$scope.vehicle.trend.label]) { 
    $scope.filteredModels = availables.models[$scope.vehicle.trend.label]; 
    } else { 
    $scope.filteredModels = [{ 
     label: '-- Select a Model --' 
    }]; 
    } 
    $scope.vehicle.model = $scope.filteredModels[0]; 
    }; 

Überprüfen Sie den Codepen! Hoffe das hilft.