I'm trying to group the items in a ng-repeat using a condition.
An example condition is to group all elements with the same hour.
The data:
[
{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'},
...
]
The 'time' field is actually a timestamp (1399372207) but with the exact time the example output is easier to understand.
I am listing these items using ng-repeat:
<div ng-repeat="r in data| orderBy:sort:direction">
<p>{{r.name}}</p>
</div>
also tried with:
<div ng-repeat-start="r in data| orderBy:sort:direction"></div>
<p>{{r.name}}</p>
<div ng-repeat-end></div>
A valid output is:
<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>
My last option if there isn't a simple solution for my problem would be to group the data and then assign it to the scope variable used in ng-repeat.
Any thoughts?
You can use groupBy filter of angular.filter module.
so you can do something like this:
usage: collection | groupBy:property
use nested property with dot notation: 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>
RESULT:
Group name: alpha
* player: Gene
Group name: beta
* player: George
* player: Paula
Group name: gamma
* player: Steve
* player: Scruath
UPDATE: jsbin