Collapse divs created with angular js ng-repeat and filter

I am trying to achieve something like the image below. This is my data

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

The objective is that If you click on any of the numbers underlines the reports that belong to that month hide or show (collapsible). I have tried many things but it seems I cannot figure it out what I need. I have made a JS BIN where my code is.

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

Any help will be kindly appreciate it. Thanks

<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

this works

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

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

in the controller and the html this

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

Advertisement

Answer