使用角度js ng-repeat和過濾器創建的摺疊div

我正在嘗試實現類似下面的圖像。這是我的數據使用角度js ng-repeat和過濾器創建的摺疊div

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

來源

2016-04-03 Gilberto Quintero

這個作品

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

來源

2016-04-04 00:14:15

感謝的人，這正是我一直在尋找 –

它是可能在開始和展示時將它們隱藏起來如果他們點擊了一個月，請打折 –

是的。只需在'ng-if'中刪除'！'，就可以成爲'''ng-if =「showReport [key + key1]」''' –

使用角度js ng-repeat和過濾器創建的摺疊div

回答

相關問題