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

【问题标题】：Collapse divs created with angular js ng-repeat and filter折叠使用 Angular js ng-repeat 和过滤器创建的 div
【发布时间】：2016-07-23 09:34:09
【问题描述】：

我正在尝试实现如下图所示的目标。这是我的数据

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

目标是，如果您单击任何数字下划线，则属于该月的报告会隐藏或显示（可折叠）。我已经尝试了很多东西，但似乎我无法弄清楚我需要什么。我在我的代码所在的位置制作了一个 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>

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat ng-repeat collapse

【解决方案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>

【讨论】：

是否可以在启动时保持它们隐藏并在它们单击一个月后显示它们？
是的。只需删除 ng-if 中的 ! ，使其变为 ng-if="showReport[key+key1]"