角度jsで作成されたdivを折りたたんで繰り返します。

私は下の画像のようなものを実現しようとしています。これは私のデータです角度jsで作成された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

これはコントローラと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

感謝の男で

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

を働き、これは私が –

探していたまさにですがそれですスタートアップとショーでそれらを隠しておくことが可能彼らが一ヶ月をクリックすると裾？ –

はい。 'ng-if'で'！ 'を削除するだけですので、' 'ng-if ="になります。showReport [key + key1] "' '' –

角度jsで作成されたdivを折りたたんで繰り返します。

答えて

関連する問題