Angularjs ng-model 两个选择标签之间的复杂链接

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 中显示它们。第一个选择必须以第二个为条件。我确实喜欢这个，而且效果很好。当我选择一个趋势时，另一个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 相互依赖并且趋势/模型显示良好的标签？

当我得到一个像 $scope.vehicle = {"trend": {"label": "ALFA ROMEO"}, "model": {"label": "159"}}; 这样的 vehicle 时，我希望选择显示好的信息。

Answer 1

如果您能详细说明一下可能会有所帮助，但这个 codepen 可能会展示您的需求：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>

如果这不能完全解决问题，请告诉我，我可以提供进一步帮助。

编辑：我已更新答案以自动选择所选模型的可用车辆。现在这是否解决了您所描述的问题？

当您从选择输入元素中选择一个选项时，该选择 然后将输入设置为所选选项

我已经对上面的 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];
  };

检查代码笔！希望这会有所帮助。