折叠使用 angular js ng-repeat 和过滤器创建的 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 }
];

objective 是，如果您单击任何带下划线的数字，则属于该月的报告将隐藏或显示（可折叠）。我尝试了很多东西，但似乎无法弄清楚我需要什么。我在我的代码所在的位置创建了一个 JS BIN。

http://jsbin.com/huhabehoju/edit?html,js,output

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

<body>
<div ng-controller="MainController"> 
<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>
</div>
</body>

Answer 1

这有效

    $scope.showReport = {};
      $scope.toggleShow = function (ym) {

       $scope.showReport[ym] = !$scope.showReport[ym];
     };
 });

在控制器中和 html 这个

    <ul ng-repeat="(key, value) in Reports | groupBy: 'Year'">
      {{ key }}
      <ul ng-repeat="(key1, value1) in value | groupBy: 'Month'">
    <a ng-click="toggleShow(key+key1)"> O{{key1}} </a>
  <li ng-repeat="p in value1" ng-if="!showReport[key+key1]">
    {{p.Name }} 
  </li>
</ul>
</ul>

折叠使用 angular js ng-repeat 和过滤器创建的 div

Collapse divs created with angular js ng-repeat and filter

javascript

angularjs

angularjs-ng-repeat

ng-repeat

collapse