迭代对象数组以构建div结构

Question

我正在尝试使用角度ng创建一个类似于图像的结构 - 在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

这可能会给你一些想法 -

DateTimeFormatInfo df1 = new DateTimeFormatInfo();
df1.SortTimePattern();

让我知道它是否有效

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