Angular ng-repeat conditional wrap items in element (group items in ng-repeat)

The question:

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

also tried with:

<div ng-repeat-start="r in data| orderBy:sort:direction"></div>
<div ng-repeat-end></div>

A valid output is:

<div class="group-class">
<div class="group-class">

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?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

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

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}


<ul ng-repeat="(key, value) in players | groupBy: 'team'">
  Group name: {{ key }}
  <li ng-repeat="player in value">
    player: {{ }} 

Group name: alpha
* player: Gene
Group name: beta
* player: George
* player: Paula
Group name: gamma
* player: Steve
* player: Scruath

UPDATE: jsbin

Method 2

First make group in Controller:

 $scope.getGroups = function () {
    var groupArray = [];
    angular.forEach($, function (item, idx) {
        if (groupArray.indexOf(parseInt(item.time)) == -1) {
    return groupArray.sort();

Then Make a Filter for it:

 myApp.filter('groupby', function(){
    return function(items,group){       
       return items.filter(function(element, index, array) {
        return parseInt(element.time)==group;
 }) ; 

Then Change Template:

 <div ng-repeat='group in getGroups()'>
     <div ng-repeat="r in data | groupby:group" class="group-class">


Method 3

Just a simple HTML solution for static groups.

  Group name: Football
  <li ng-repeat="player in players" ng-if=" == 'football'">
    Player Name: {{ }} 
  Group name: Basketball
  <li ng-repeat="player in players" ng-if=" == 'basketball'">
    Player Name: {{ }} 


Group name: Football
– Player Name: Nikodem
– Player Name: Lambert
Group name: Basketball
– Player Name: John
– Player Name: Izaäk
– Player Name: Dionisia

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment