2つの選択タグ間の角度 - 複雑なリンク

Question

私は自動車傾向のリストとそれに対応するモデルを含むjsonを持っています。

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

selectに表示したいと思います。最初の選択は2番目の選択を調整する必要があります。私はこれが好きで、うまく動作します。私がトレンドを選択すると、他のselectは私に良いモデルを示すだけです。

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

ここに私の問題があります。すでにvehicleが作成されている場合、selectsは良い傾向とモデルを示していません。 vehicle.trendはオブジェクトなので、ng-modelはlabel属性を取得できません。

selectは依存関係にあり、トレンド/モデルは良好なラベルを示していますか？

vehicleがこのようになると、$scope.vehicle = {"trend": {"label": "ALFA ROMEO"}, "model": {"label": "159"}};は良い情報を表示するようにします。

Answer 1

あなたはもう少し手の込んだことができればそれが役立つかもしれないが、これcodepenは何が必要示し得る：http://codepen.io/Findiglay/pen/mPajZB?editors=1010

次のように私は、slighty選択メニューを変更しました：

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

は私をしてみましょうこれが問題を正確に解決できないかどうかを知り、私はさらに助けます。

編集：選択したモデルで使用可能な車両を自動的に選択するように回答を更新しました。これで、あなたが説明している問題に対応していますか？

あなたは 入力が、その後、私は上記のhtmlへの更新を行い、使用するには、以下の機能を追加しました

選択したオプションに設定されている選択し、選択入力要素からオプションを選択すると、 ng変更で解雇：

/** 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]; 
    }; 

コードを確認してください！お役に立てれば。