angularjs ng-repeat依赖于另一个ng-repeat

Question

我有一个数组（helper.makes）像这样：

[0] => { make: 'BMW', models: ['3 series','5 series'] }
[1] => { make: 'Honda', models: ['Camry','Corolla'] }

在我的选择中，我希望用户选择品牌，然后选择的型号将相应更新。 到目前为止，这是我的代码：

<label>
  <p>Make</p>
  <select ng-model="make">
    <option ng-repeat="(key, value) in helper.makes | orderBy: 'name'">{{ value.name }}</option>
  </select>
</label>
<label>
  <p>Model</p>
  <select ng-model="model">
    <option ng-repeat="(key, value) in helper.getModelByMake(make) | orderBy: value">{{ value }}</option>
  </select>
</label>

在我简单地使用关联数组之前，我可以做helper.makes [make]，但是一直将其变成对象，angular拒绝对其进行排序。 通过这种方式，我创建了getModelByMake函数，该函数简单地遍历make列表，找到正确的make并返回其models数组。

问题是，随着人员更改品牌，似乎没有更新。 我相信它尝试加载一次，看到未选择任何make并返回空白结果。

在AngularJS中，哪种方法最适合此类实例？ AngularJS可以在这里做一些我不知道的事情吗？

Answer 1

首先，我极力建议您使用ngOptions而不是ngRepeat 。 ngOptions正是针对这种ngOptions而制作的。

此外，您不需要使用ngChange指令或$watch ，你只需要获得车型array从ngModel 第一选择ngOptions ，如下图所示：

 var app = angular.module('app', []) .controller('mainCtrl', function($scope) { $scope.makes = [ { "make":"BMW", "models":[ "3 series", "5 series" ] }, { "make":"Honda", "models":[ "Camry", "Corolla" ] } ]; });

 <!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> </head> <body ng-controller="mainCtrl"> <label> <p>Make</p> <select ng-model="make" ng-options="objMake as objMake.make for objMake in makes"> </select> </label> <div ng-if="make"> <label> <p>Model</p> <select ng-model="model" ng-options="model for model in make.models"> </select> </label> </div> </body> </html>

注意：当第一个select没有选择时，我使用ng-if no hide第二个选择。

Answer 2

您可以在make选项中使用ng-change并创建如下所示的内容：

<label>
  <p>Make</p>
  <select ng-model="make">
    <option ng-repeat="(key, value) in helper.makes | orderBy: 'name'" ng-change="getModelByMake()">{{ value.name }}</option>
  </select>
</label>
<label>
  <p>Model</p>
  <select ng-model="model">
    <option ng-repeat="(key, value) in helper.model | orderBy: value">{{ value }}</option>
  </select>
</label>

然后，在您的getModelByMake()函数中，获取制造商ID并获取模型。

angularjs ng-repeat依赖于另一个ng-repeat

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-07-12 02:36:42

解决方案2
1 2016-07-12 02:19:30

angularjs ng-repeat依赖于另一个ng-repeat

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-07-12 02:36:42

解决方案2 1 2016-07-12 02:19:30

解决方案1
2 已采纳 2016-07-12 02:36:42

解决方案2
1 2016-07-12 02:19:30