Question

我有一个数组（helper.makes），如下所示：

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

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

<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]，但是它一直把它变成一个对象而且有角度拒绝命令它。这样做我创建了函数getModelByMake，它简单地循环遍历make列表，找到正确的函数并返回它的models数组。

问题是，当用户更改make时，似乎没有更新。我相信它正在尝试加载一次，看到没有选择make并返回空白结果。

AngularJS中哪种方法最适合这样的实例？是否有一些令人敬畏的AngularJS可以在这里做我不知道的事情？

Answer 1

首先，我建议您使用ngOptions代替ngRepeat。 ngOptions完全是出于这种事情。

此外，您不需要使用ngChange指令或$watch，您只需要从<{1}}中选择的模型中获取模型array em> first ngModel，如下所示：

＆＃13;

ngOptions

＆＃13;

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

＆＃13;

注意：当第一个<!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>没有选择时，我使用ng-if没有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 个答案: