遍历对象数组以构建 div 结构

Question

我正在尝试使用 angular ng-repeat Reports 数组中的这些数据来创建如下图所示的结构。我知道我必须使用某种迭代来实现它，但我很迷茫。

$scope.Reports = 
 [
 { Id: 1, Name: 'Report One', Year: 2016, Month: 5 },
 { Id: 2, Name: 'Report Core', Year: 2016, Month: 5 },
 { Id: 3, Name: 'Report Alpha', Year: 2016, Month: 3 },
 { Id: 4, Name: 'Report Moon', Year: 2015, Month: 5 },
 { Id: 5, Name: 'Report Sky', Year: 2015, Month: 2 }
 ];

我不确定是否需要创建另一个数组来存储一些数据。像这样

$scope.years = [];
$scope.months = [];

如有任何帮助，我们将不胜感激。谢谢

Answer 1

也许这会给你一些想法 -

<tr ng-repeat="(key, value) in Reports">
  <td> {{key}} </td> <td> {{ value }} </td>
</tr>

让我知道它是否有效

Answer 2

我想你可以使用 angular.filter 模块

<ul ng-repeat="(key, value) in Reports | groupBy: 'Year'">
  {{ key }}
  <ul ng-repeat="(key1, value1) in value | groupBy: 'Month'">
    O{{key1}} 
  <li ng-repeat="p in value1">
    {{p.Name }} 
  </li>
</ul>
</ul>

JSBin 希望对你有帮助

Answer 3

如果您能找到一种方法根据来自 Controller 的日期对报告进行分组，则可以执行此操作。 Here is the code pen

$scope.getReportGroup = function() {
var groupedReports = {};
angular.forEach($scope.Reports, function(obj, i) {
  if (!groupedReports.hasOwnProperty(obj.Year)) {
    groupedReports[obj.Year + ''] = [];
  }
  groupedReports[obj.Year + ''].push(obj);
});
return groupedReports;
}

遍历对象数组以构建 div 结构

Iterate over array of object to build a div structure

javascript

arrays

angularjs

ng-repeat

angularjs-ng-repeat