折叠使用 Angular js ng-repeat 和过滤器创建的 div
Posted
技术标签:
【中文标题】折叠使用 Angular js ng-repeat 和过滤器创建的 div【英文标题】：Collapse divs created with angular js ng-repeat and filter 【发布时间】：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'">
Okey1
<li ng-repeat="p in value1">
p.Name
</li>
</ul>
</ul>
</div>
</body>
【问题讨论】：
【参考方案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)"> Okey1 </a>
<li ng-repeat="p in value1" ng-if="!showReport[key+key1]">
p.Name
</li>
</ul>
</ul>
【讨论】：
是否可以在启动时保持它们隐藏并在它们单击一个月后显示它们？ 是的。只需删除ng-if 中的 ! ，使其变为 ng-if="showReport[key+key1]"以上是关于折叠使用 Angular js ng-repeat 和过滤器创建的 div的主要内容，如果未能解决你的问题，请参考以下文章
angular.js > 如何在视图中获取内部 JSON 数据（使用 ng-repeat 指令）