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>

Answer 2

I solved this in another SO question here, Ionic Dynamic List Divider. Basically you can modify the list (in the controller, not the source of course) to include the dates. In your view, you notice this and render them as dividers.