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

Question

我正在尝试创建一个如下图所示的结构，并在报告数组中重复这些数据。我知道我必须使用某种迭代来实现它，但我很迷失。

$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

我想你可以使用 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 希望对您有帮助