5715

Sorting Angularjs ng-repeat by date

Question:

I am relatively new to AngularJS. Could use some help

I have a table with the following info

<table> <tr> <th><span ng-click="sortType = 'first_name'; sortReverse = !sortReverse">Referral Name</span></th> <th><span ng-click="sortType = 'date'; sortReverse = !sortReverse">Referral Name</span></th> </tr> <tr ng-repeat="x in referral | orderBy:sortType:sortReverse"> <td>name</td> <td>date</td> </tr> </tabe>

And the js code is as follows (after the controller connections)

$scope.sortType = ''; $scope.sortReverse = false;

This works perfectly for ascending and descending when sorting the name.

Unfortunately it works similarly in the case of date too (it is sorting alphabetically, rather than by date).

The date format I am getting from the backend(python) is in this format:

i["date"] = i["date"].strftime("%B %d, %Y") September 13, 2016 <-- this format

I understand the mistake I made, but I am not able to find the solution for it.

How can I sort by date?

Thanks in advance guys.

Answer1:

Ideally you'd have a sortable object for date. One candidate is an isoformatted date:

i["date"] = i["date"].isoformat()

Now sorting should work just fine but it'll display wonky. So you'll need to use a date filter to format it on the UI:

<table> <tr> <th><span ng-click="sortType = 'first_name'; sortReverse = !sortReverse">Referral Name</span></th> <th><span ng-click="sortType = 'date'; sortReverse = !sortReverse">Referral Name</span></th> </tr> <tr ng-repeat="x in referral | orderBy:sortType:sortReverse"> <td>name</td> <td>{{x.date | date : 'MMMM d, yyyy'}}</td> </tr> </table>

Answer2:

As you have noticed, the value you receive is type of string and therefore it is sorted alphabetically. You need to convert it into Date() beforehand. So basically what you need is to loop over the array of data you got and add a new property (or replace existing one) with a new Date object:

referral.forEach((ref) => { ref.date_obj = new Date(ref.date) };

I just checked, JavaScript seems to be parsing format "September 13, 2016" pretty well.

Recommend

  • Sort Query Results by Multiple columns using a Weight Factor to Normalize
  • Sorting elements of vector where each element is a pair [duplicate]
  • Linq distinct based on two columns
  • How to test labels in QTP
  • Delete object in core data, failed to match the Swift Array Element type
  • Ordering a Union Query in MS Access SQL
  • VBA: Extract Top 'x' Entries from each category
  • limited threads in soapUI free version
  • How to sort things out in ListView?
  • HikariPool-1 - Unusual system clock change detected, soft-evicting connections from pool
  • SSRS 2008 - Sorting within a group
  • Crafting a LINQ based solution to determine if a set of predicates are satisfied for a pair of colle
  • Can't connect Entity Framework to local SQL Server Express
  • How to select table rows/complete table?
  • Run script file on remote server
  • Wait for .each() .getJSON request to finish before executing a callback
  • Generic/Unknown HTTP Error with response code 0 using UnityWebRequest
  • Query to find the duplicates between the name and number in table
  • Eloquent update method change created_at timestamp
  • Sencha Touch 2.0 Controller refs attribute not working?
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • How to recover from a Spring Social ExpiredAuthorizationException
  • Possible to stop flickering java tooltip in heavyweight mode?
  • ILMerge & Keep Assembly Name
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • How to model a transition system with SPIN
  • Large data - storage and query
  • WOWZA + RTMP + HTML5 Playback?
  • bootstrap to use multiple ng-app
  • Acquiring multiple attributes from .xml file in c#
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Cant find why the layout is getting smaller
  • How to stop GridView from loading again when I press back button?
  • How can I remove ASP.NET Designer.cs files?
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal
  • How to load view controller without button in storyboard?