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!

In a quick glance, it looks like `event.date` is outside of the repeater. — JimmyRare, Nov 03 '14 at 10:56
Yes I know. But just moving it inside the repeater does not solve my problem. In This case the date would be displayed above every entry and not just once per day... — 7thson, Nov 03 '14 at 10:59

score 6 · Accepted Answer · answered Nov 03 '14 at 11:33

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>

Similar question, new Ionic/Angular version: https://stackoverflow.com/questions/47983482/ionic-v3-group-list-by-date-day Maybe you can help again? :-) — 7thson, Dec 26 '17 at 20:43

score 1 · Answer 2 · edited May 23 '17 at 11:50

1

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.

edited May 23 '17 at 11:50

Community

1
1

answered Nov 03 '14 at 11:28

Raymond Camden

10,661
3
34
68

Angular list with ng-repeat with date as divider

2 Answers2

Linked