AngularJS ng-Modelldefinition für Dropdown-Baumstruktur

Question

Ich habe ein Problem mit meiner AngularJS-Anwendung, bei der ich die Daten aus den Dropdown-Menüs auswählen muss. Das Problem ist, dass wenn das erste Dropdown (Marken) geändert wird, die Daten nur in das zweite Dropdown (Modelle), nicht global, zu allen anderen zweiten Dropdowns injiziert werden müssen - wie in der JSFiddle gezeigt.

JsFiddle

Ich weiß, dass das Problem im ng-Modell ist - wie man soll ich definiere das ng-Modell?

<div ng-controller="MyCtrl"> 
<div ng-if="car" ng-repeat="car in cars"> 
    <br><label>{{car.name}}</label><br> 
    <label>brand</label> 
    <select ng-model="car.brand" ng-options="car as car.name for car in brands" ng-change="loadBrands($index)"> 
    <option value="">select</option> 
    </select> 
    <label>model</label> 
    <select ng-model="car.brand.model" ng-options="car as car.model for car in models"> 
    <option value="">select</option> 
    </select> 
<button ng-click="show($index)">show</button> 

Dank.

Answer 1

Statt die $scope.models global für alle Autos zu ändern, sollten Sie die Modelle nur für die ausgewählte Auto aktualisieren:

JSFiddle with the following modifications:

$scope.loadBrands = function(index) { 
    if ($scope.cars[index].brand.name == 'audi') { 
     $scope.cars[index].models = $scope.audi; 
    } else { 
     $scope.cars[index].models = $scope.bmw; 
    } 
    } 

und die Auswahl für die Modelle sollte geändert werden:

<select ng-model="brand.model" ng-options="car as car.model for car in cars[$index].models"> 
    <option value="">select</option> 
</select>