Collapse Divs mit eckigen js ng-Repeat und Filter erstellt

Ich versuche, etwas wie das Bild unten zu erreichen. Dies ist meine DatenCollapse Divs mit eckigen js ng-Repeat und Filter erstellt

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

Ziel ist es, dass Sie auf eine der Nummern finden Sie in den Berichten betont, dass in diesem Monat verstecken oder zeigen gehören (zusammenklappbar). Ich habe viele Dinge ausprobiert, aber es scheint, dass ich nicht herausfinden kann, was ich brauche. Ich habe ein JS BIN gemacht, wo mein Code ist.

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

Jede Hilfe wird es danken.

Dank

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

Quelle

2016-04-03 Gilberto Quintero

das funktioniert

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

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

im Controller und html diese

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

Quelle

2016-04-04 00:14:15

Dank Mann, das ist genau das, was ich für –

suchen, ist es möglich, sie beim Start und der Show t versteckt zu halten Saum, wenn sie einen Monat klicken? –

ja. entferne einfach das '!' in 'ng-if', so dass es' '' ng-if = "showReport [key + key1]" '' 'wird –

Collapse Divs mit eckigen js ng-Repeat und Filter erstellt

Antwort

Verwandte Themen