AngularJS 下拉树结构的 ng-model 定义

Question

我的 AngularJS 应用程序有问题，我必须从下拉列表中选择数据。问题是，当第一个下拉列表（品牌）发生变化时，数据必须仅注入到第二个下拉列表（模型）中，而不是全局注入到所有其他第二个下拉列表中 - 如 jsfiddle 所示。

我知道，问题出在 ng-model - 我应该如何定义 ng-model？

<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>

谢谢。

Answer 1

与其全局更改所有汽车的 $scope.models，您应该只更新 selected 汽车的模型：

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 应更改为：

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

AngularJS 下拉树结构的 ng-model 定义

AngularJS ng-model definition for dropdown tree structure

html

javascript

angularjs

angular-ngmodel

dropdown