developer033 developer033 - 4 months ago 15x
AngularJS Question

GroupBy Filter in AngularJS

I have an array of timeline which I want to divide in groups per date (dd/MM/YYYY). I was trying make my own "groupBy" without any library (which I really prefer), but I got no success. So I decided to search for a library that does it and I found this: angular-filter, so now I'm trying to use it.

The problem is that I can't figure out what I'm doing wrong, I followed this example and created my JS Bin to ilustrate my situation. It always says the format date is wrong, why?

By the way, the expected result is:

    Date: 17/06/2016
  • Timeline item: an e-mail edited

  • Timeline item: an e-mail deleted

  • Timeline item: an e-mail edited

    Date: 18/06/2016
  • Timeline item: an e-mail added

  • Timeline item: an e-mail added


Filters in Angular are called many times, not just once. So during the first digest, your created_at values are converted to D/M/Y format. Then, when during the next digest Angular call your filters again, it tries to create a date with already converted value (i.e. new Date('18/06/2016')). So you get an Invalid date as a result.

The solution is to convert the dates once in the controller before assigning them to the view and omit the map: ... filter.

See the updated jsbin.