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依赖工作，趋势/模型显示好标签？

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

Answer 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！希望这会有所帮助。

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

1 个答案: