如何使用NG-选项数组对象

-1

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-选项，以显示由主类别分组的子类别。结果应该是这样的：

<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>

来源

2017-06-19 Mamo YZ

你必须的'NG-options'，结账[这个答案]（HTTPS功能扁平化你的'data'使用组：//计算器。 com/a/18615773/2435473） –

一个ng-repeat类别和一个ng-repeat嵌入在子目录中的第一个 – Aigloun

您的JSON对象无效... – lin

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"}, 
 
       \t {"name": "Sub Category 4"} 
 
      ] 
 
     } 
 
    ]; 
 
    
 
    $scope.options = []; 
 
    
 
    angular.forEach(categories, function (category){ 
 
    \t angular.forEach(category.subcats, function (subCat){ 
 
     \t subCat.categoryName = category.name; 
 
     \t $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>

来源

2017-06-19 09:56:22

这是另一个答案与启用/禁用单个项目：https://stackoverflow.com/questions/18615624/angularjs-ng-options-with-group/37035297＃37035297 –

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>

来源

2017-06-19 09:54:31 rajeev

这不是一个有问题的问题..这个问题已被特别要求为AngularJS –

如何使用NG-选项数组对象

回答

相关问题