我有一个像这样的数组(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] 操作，但这不断将其转换为对象，而 Angular 拒绝对其进行排序。通过这种方式，我创建了函数 getModelByMake，它只是循环遍历品牌列表，找到正确的品牌并返回它的模型数组。
问题是，当人们改变品牌时，它似乎不会更新。我相信它正在尝试加载一次，发现没有选择任何 make 并返回空白结果。
哪种方法最适合 AngularJS 中的此类实例？ AngularJS 是否可以在这里做一些我不知道的很棒的事情？
最佳答案
首先，我强烈建议您使用 ngOptions而不是ngRepeat 。 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>注意:我使用了ng-if否hide当第一个 select 时选择第二个没有选择。
关于javascript - angularjs ng-repeat 依赖于另一个 ng-repeat，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38318964/