angularjs - Angular list with ng-repeat with date as divider

Question

I've got a JSON object with different events that looks like this:

{
   "error":false,
   "events":[
      {
         "id":1,
         "title":"First entry",
         "date":"2014-11-04"
      },
      {
         "id":2,
         "title":"Second entry",
         "date":"2014-11-04"
      },
      {
         "id":3,
         "title":"Third entry",
         "date":"2014-11-05"
      },
      {
         "id":4,
         "title":"Fourth entry",
         "date":"2014-11-06"
      },
      {
         "id":5,
         "title":"Fifth entry",
         "date":"2014-11-06"
      }
   ]
}

This object is stored in $scope.events in my controller.

Now I'm looping this array to build the list of events:

<ion-list>
<div class="item item-divider">
  {{event.date}}
</div>  
  <a class="item item-thumbnail-left" href="#/app/event/{{event.id}}" ng-repeat="event in events">
  <img src="media/thumbnails/{{event.id}}.jpg">
  <h1>{{event.title}}</h1>
  </a>
</ion-list>

My goal is to display {{event.date}} as a list divider just once for every day. So in this examle it shoudl look like this:

2014-11-04 (divider)

• First entry

• Second entry

2014-11-05 (divider)

• Third entry

2014-11-06 (divider)

• Fourth entry

• Fifth entry

I'm relly new to ionic & angular and I have no idea how to achieve this. May with some custom filter?

All in all I'm looking for something similar to Angular: Getting list with ng-repeat with dividers / separators but with the date as separator instead of initial letter.

Some ideas?

Any help/tip is really appreciated!

Answer 1

You can use angular.filters (https://github.com/a8m/angular-filter) to group your list by date please see demo below

var app = angular.module('app', ['angular.filter']);

app.controller('homeCtrl', function($scope) {

  $scope.data = {
    "error": false,
    "events": [{
      "id": 1,
      "title": "First entry",
      "date": "2014-11-04"
    }, {
      "id": 2,
      "title": "Second entry",
      "date": "2014-11-04"
    }, {
      "id": 3,
      "title": "Third entry",
      "date": "2014-11-05"
    }, {
      "id": 4,
      "title": "Fourth entry",
      "date": "2014-11-06"
    }, {
      "id": 5,
      "title": "Fifth entry",
      "date": "2014-11-06"
    }]
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.9/angular-filter.min.js"></script>

<div ng-app="app">
  <div ng-controller="homeCtrl">

    <ion-list ng-repeat="(key, value) in data.events | groupBy: 'date'">
      <div class="item item-divider">
        <h1> {{key}}</h1>
      </div>

      <a class="item item-thumbnail-left" href="#/app/event/{{event.id}}" ng-repeat="event in value">
        <img src="media/thumbnails/{{event.id}}.jpg">
        <h3>{{event.title}}</h3>
      </a>
    </ion-list>


  </div>