如何在数组中使用带有对象的 ng-options

我有一个数据源，如下所示：

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"}]
}]

我不知道如何使用ng-options来显示按主要类别分组的子类别。结果应如下所示：

<select>
   <optgroup>First Category
      <option>Sub Category 1</option>
      <option>Sub Category 2</option>
      <option>Sub Category 3</option>
   </optgroup>
   <optgroup>Second Category
      <option>Sub Category 1</option>
      <option>Sub Category 2</option>
      <option>Sub Category 3</option>
   </optgroup>
</select>

1(修复你的categories数组;

2(将其压平以与ngOptions一起使用，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);
      });
    });
  
});

<script src="https://code.angularjs.org/1.6.2/angular.js" ></script>
<html ng-app="plunker">
  <body ng-controller="MainCtrl">
  
     <select ng-model="test.model" 
        ng-options="option.name group by option.categoryName for option in options">
    </select>
    
  </body>
</html>

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>

相关内容

最新更新

热门标签：