如何在包含对象的数组中使用ng-options

22 浏览
0 Comments

如何在包含对象的数组中使用ng-options

我有一个数据源,看起来是这样的:

var categories = 
[{
{"name":"第一类别","subcats":[
{"name":"子类别1"},
{"name":"子类别2"},
{"name":"子类别3"}]
},{
{"name":"第二类别","subcats":[
{"name":"子类别1"},
{"name":"子类别2"},
{"name":"子类别3"}]
}]

我无法弄清如何使用ng-options来按主类别分组显示子类别。结果应该是这样的:


0
0 Comments

问题的出现原因:在使用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指令来生成一个带有对象的数组的下拉菜单,并动态显示选项。

0
0 Comments

问题的原因是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中显示一个下拉列表,其中选项按照父类别进行分组显示。另外,还附带了一个链接,其中提供了另一个答案,该答案介绍了如何启用/禁用单个选项的功能。

0