0

I'm displaying a list of items with AngularFire using the ng-repeat directive. I would like to display headers in the list that are grouped by day. That is, all of the items whose timestamps fall on Jan 23rd, 2015 are under that header.

How might I accomplish that with AngularFire? My concern with altering the structure of the data is that I would lose the synchronicity with the Firebase backend, right? I want to be able to add/remove/edit items in the list with the changes going to/coming from Firebase.

Right now my controller for this list looks like:

app.controller('IssuesController', function($scope, $firebase) {
    var ref = new Firebase("[my firebase url]");
    var sync = $firebase(ref);
    // create a synchronized array for use in our HTML code
    $scope.issues = sync.$asArray();

    $scope.getIssueIndex = function(issue) {
        return Date.parse(issue.timestamp);
    }
});
SuperDeclarative
  • 1,609
  • 4
  • 18
  • 32
  • There are quite some questions about grouping data in an AngularJS ng-repeat. Did you try any of them yet? E.g. http://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter – Frank van Puffelen Feb 10 '15 at 01:54
  • I looked at a number of suggestions specifically for AngularFire and they didn't look good - but I think I missed the one you referenced. I will try it and post back. Thanks. – SuperDeclarative Feb 11 '15 at 02:47
  • Also, [this post](http://stackoverflow.com/questions/26047958/is-it-possible-to-sortcompare-and-reverse-an-array-in-angularfire/26051475) which includes a working fiddle that uses headers and nested lists. – Kato Feb 12 '15 at 21:12

0 Answers0