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

时间:2016-05-05 17:47:23

标签: angularjs angular-ngmodel

我有一个包含车辆趋势列表的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 时,我希望选择显示良好的信息。

1 个答案:

答案 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!希望这会有所帮助。