下拉树结构的AngularJS ng模型定义

时间:2016-05-04 11:39:19

标签: javascript html angularjs angular-ngmodel dropdown

我的AngularJS应用程序有问题,我必须从下拉列表中选择数据。 问题在于,当第一个下拉列表(品牌)被更改时,数据必须仅注入第二个下拉列表(模型),而不是全局注入所有其他第二个下拉列表 - 如jsfiddle中所示。

JsFiddle

我知道,问题出在ng模型中 - 如何定义ng模型?

<div ng-controller="MyCtrl">
 <div ng-if="car" ng-repeat="car in cars">
  <br><label>{{car.name}}</label><br>
  <label>brand</label>
  <select ng-model="car.brand" ng-options="car as car.name for car in brands" ng-change="loadBrands($index)">
   <option value="">select</option>
  </select>
  <label>model</label>
  <select ng-model="car.brand.model" ng-options="car as car.model for car in models">
   <option value="">select</option>
  </select>
<button ng-click="show($index)">show</button>

  

感谢。

1 个答案:

答案 0 :(得分:1)

您应该仅为所选汽车更新模型,而不是为所有汽车全局更改$scope.models

JSFiddle with the following modifications

  $scope.loadBrands = function(index) {
    if ($scope.cars[index].brand.name == 'audi') {
      $scope.cars[index].models = $scope.audi;
    } else {
      $scope.cars[index].models = $scope.bmw;
    }
  }

并且模型的选择应更改为:

<select ng-model="brand.model" ng-options="car as car.model for car in cars[$index].models">
  <option value="">select</option>
</select>