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

【问题标题】：How to use ng-options in array with objects如何在带有对象的数组中使用 ng-options
【发布时间】：2017-11-21 11:07:19
【问题描述】：

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

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>

【问题讨论】：

你必须扁平化你的data才能使用ng-options的分组功能，结帐this answer
一个 ng-repeat 在类别上，一个 ng-repeat 嵌入在 subcats 上的第一个中
您的 JSON 对象无效...
问题是我不能使用 ng-repeat 方法。我正在使用引导选择方法。当我将 ng-model 绑定到元素时，它停止工作。
@PankajParkar 似乎这是唯一可能的选择。谢谢。

标签： angularjs

【解决方案1】：

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>

【讨论】：

这不是 Angular 问题。这个问题是专门针对 AngularJS 提出的

【解决方案2】：

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>

【讨论】：

这是另一个启用/禁用单个项目的答案：stackoverflow.com/questions/18615624/…