我试图使用条件在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.nested_property
JS:
$scope.players = [
{name: 'Gene',team: 'alpha'},{name: 'George',team: 'beta'},{name: 'Steve',team: 'gamma'},{name: 'Paula',{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
*玩家:乔治
*玩家:Paula
组名称:gamma
*玩家:Steve
*玩家:Scruath
更新:jsbin