Angularjs ng模型两个select标记之间的复杂链接
我有一个json,其中包含车辆趋势列表和相应的车型Angularjs ng模型两个select标记之间的复杂链接,angularjs,angular-ngmodel,Angularjs,Angular Ngmodel,我有一个json,其中包含车辆趋势列表和相应的车型 var availables = { "trends": [ {"label": "ALFA ROMEO"} ], "models": { "ALFA ROMEO": [ {"label": "159"}, {"label": "4C"}, {"label": "AR8C SPIDER"}, {"label": "BRERA"}, {"label": "GI
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
只显示好的模型
<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>
Véhicule
{{“选择趋势”{124;翻译}
莫代尔
{{“选择_模型”{124;翻译}
我的问题来了。当我有一辆已创建的车辆
时,选择
不会显示良好的趋势和车型。由于vehicle.trend
是一个对象,我可以理解ng model
无法获取label
属性
我怎样才能使这两个select
在依赖关系和显示良好标签的趋势/模型中工作
当我得到一辆像这样的汽车$scope.vehicle={“trend”:{“label”:“ALFA ROMEO”},“model”:{“label”:“159”}代码>我希望选择显示良好的信息。如果您能详细说明一下,可能会有所帮助,但此代码笔可能会演示您需要的内容:
我稍微更改了选择菜单,如下所示:
<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>
检查密码笔!希望这能有所帮助。您能详细阐述一下您的问题吗?我知道它在工作,但你的问题还不清楚。我已经创建了一个代码笔,一旦我知道问题是什么,就可以帮助找出解决方案。我已经更新了我的问题。为了澄清,您现在要从选择输入中删除与您已经选择的不匹配的所有其他选择选项。当我的车辆对象为{“trend”:{“label”:“ALFA ROMEO”},“model”:{“label”:“159”}代码>趋势选择选项在ALFA ROMEO上选择,型号选择在159上。像这样,我可以看到车辆是什么,改变趋势或模型。但这正是正在发生的事情,不是吗?当您从选择输入元素中选择一个选项时,该选择输入将设置为所选选项。这是否解决了问题?否,但我认为我无法解释我的问题,因为您提供的与我需要的相反。我需要的是当车辆
模型(通过ajax)设置时,选择
标记显示趋势和模型的良好标签。
/** 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];
};