ドロップダウンツリー構造のAngularJS ng-model定義

Question

ドロップダウンからデータを選択する必要があるAngularJSアプリケーションに問題があります。 問題は、最初のドロップダウン（ブランド）が変更されたとき、データは、グローバルではなく2番目のドロップダウン（モデル）にのみ注入されなければならないという点です。

JsFiddle

私はこの問題は、NG-モデルであることを、知っている - 私はNG-モデルを定義する必要がありますする方法？

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

感謝。

JSFiddle with the following modifications：

Answer 1

代わりに、すべての車のためのグローバル$scope.modelsを変更するので、あなただけの選択の車のモデルを更新する必要があり

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

とモデルのための選択は、次のように変更します。

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