如何在包含对象的数组中使用ng-options
问题的出现原因:在使用ng-options指令时,如果数据源是一个包含对象的数组,需要使用ngFor指令来循环遍历数组和对象,并动态生成下拉菜单的选项。
解决方法:在模板中使用ngFor指令来循环遍历数组和对象,生成下拉菜单的选项。首先,定义一个包含对象的数组categories,每个对象中包含一个name属性和一个subcats属性。然后,在模板中使用ngFor指令来遍历categories数组,使用optgroup标签来表示每个对象,将对象的name属性作为optgroup的label属性的值。在每个optgroup标签中,再使用ngFor指令来遍历subcats属性,将subcats的name属性作为option标签的内容。
具体代码如下:
this.categories = [ { "name": "First Category", "subcats": [ { "name": "Sub Category 1" }, { "name": "Sub Category 2" }, { "name": "Sub Category 3" }] }, { "name": "Second Category", "subcats": [ { "name": "Sub Category 4" }, { "name": "Sub Category 5" }, { "name": "Sub Category 6" }] } ];
<select> <optgroup *ngFor="let category of categories;" label="{{category.name}}"> <option *ngFor="let sub of category.subcats;">{{sub.name}}</option> </optgroup>
这段代码先定义了一个包含两个对象的数组categories,每个对象都有一个name属性和一个subcats属性。然后,在模板中使用ngFor指令来遍历categories数组,对于每个对象,使用optgroup标签来表示,将对象的name属性作为optgroup的label属性的值。在每个optgroup标签中,再使用ngFor指令来遍历subcats属性,对于每个subcats对象,生成一个option标签,将subcats的name属性作为option标签的内容。
通过以上的代码,我们可以使用ng-options指令来生成一个带有对象的数组的下拉菜单,并动态显示选项。
问题的原因是categories数组的结构不适合在ngOptions中使用,需要将其扁平化。解决方法是通过使用嵌套的forEach循环来重新构建options数组,将每个子类别的categoryName属性设置为其所属的父类别的名称,并将其添加到options数组中。然后,在HTML中使用ng-options指令来显示options数组中的选项,并通过group by选项按照父类别进行分组。
以下是修复后的代码示例:
angular.module('plunker', []) .controller('MainCtrl', function($scope) { var categories = [ { "name": "First Category", "subcats": [ {"name": "Sub Category 1"}, {"name": "Sub Category 2"}, {"name": "Sub Category 3"} ] }, { "name": "Second Category", "subcats": [ {"name": "Sub Category 1"}, {"name": "Sub Category 2"}, {"name": "Sub Category 3"}, {"name": "Sub Category 4"} ] } ]; $scope.options = []; angular.forEach(categories, function (category){ angular.forEach(category.subcats, function (subCat){ subCat.categoryName = category.name; $scope.options.push(subCat); }); }); });
以上代码将在HTML中显示一个下拉列表,其中选项按照父类别进行分组显示。另外,还附带了一个链接,其中提供了另一个答案,该答案介绍了如何启用/禁用单个选项的功能。