我有一个包含车辆趋势列表的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
中显示它们。第一个选择必须调整第二个选择。我喜欢这个,它工作正常。当我选择一个趋势时,另一个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"}};
slc ctl status
时,我希望选择显示良好的信息。
答案 0 :(得分:1)
如果您可以详细说明一点,这可能会有所帮助,但是此代码可能会证明您需要的内容:http://codepen.io/Findiglay/pen/mPajZB?editors=1010
我已经稍微改变了选择菜单,如下所示:
<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>
如果这不能完全解决问题,请告诉我,我可以继续提供帮助。
编辑:我已更新答案,自动选择所选车型的可用车辆。这现在是否解决了您所描述的问题?
当您从选择输入元素中选择一个选项时,该选择 然后将input设置为所选选项
我已经对上面的html进行了更新,并添加了以下功能: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];
};
检查codepen!希望这会有所帮助。