我正在尝试使用条件将项目分组为ng-repeat。
一个示例条件是将所有元素在同一小时内分组。
数据:
[
{name: 'AAA', time: '12:05'},
{name: 'BBB', time: '12:10'},
{name: 'CCC', time: '13:20'},
{name: 'DDD', time: '13:30'},
{name: 'EEE', time: '13:40'},
...
]
“时间”字段实际上是一个时间戳记(1399372207),但是使用准确的时间,示例输出将更易于理解。
我正在使用ng-repeat列出这些项目:
<div ng-repeat="r in data| orderBy:sort:direction">
<p>{{r.name}}</p>
</div>
还尝试了:
<div ng-repeat-start="r in data| orderBy:sort:direction"></div>
<p>{{r.name}}</p>
<div ng-repeat-end></div>
有效输出为:
<div class="group-class">
<div><p>AAA</p></div>
<div><p>BBB</p></div>
</div>
<div class="group-class">
<div><p>CCC</p></div>
<div><p>DDD</p></div>
<div><p>EEE</p></div>
</div>
如果没有一个简单的解决方案,我的最后一个选择是将数据分组,然后将其分配给ng-repeat中使用的作用域变量。
有什么想法吗?
您可以使用angular.filter模块的groupBy过滤器。
因此您可以执行以下操作:
用法: collection | groupBy:property
使用带点标记的嵌套属性:property.nested_property
JS:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
HTML:
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
结果:
组名:alpha
*播放器:Gene
组名:beta
*播放器:George
*播放器:Paula
组名:gamma
*播放器:Steve
*播放器:Scruath
更新: jsbin
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句