Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS ng-repeat orderBy date not working

Tags:

json

angularjs

I have a working ng-repeat, that I would like to order by descending date (newest items first).

However, I can not seem to get it to work. I have double checked quoting, etc. I have tried orderBy:'createdate':reverse , orderBy:'article.createdate':reverse, and orderBy:'data.blog.article.createdate':reverse None seem to work.

This is my view:

<article data-ng-if="article.id == post || post===NULL" data-ng-repeat="article in data.blog.article | orderBy:'createdate':reverse | slice:currentPage*pageSize:currentPage+1*pageSize">     <h2 class="blog-post-title">         <a href="#!/blog/{{article.id}}" title="Permalink to {{article.title.__cdata}}">{{article.title.__cdata}}</a>     </h2>     <span class="blog-post-meta">Posted on {{article.createdate | date:'MMMM dd, yyyy h:mma'}} by {{article.author}}</span>     <div class="blog-post-content" ng-bind-html="article.content.__cdata">{{article.content.__cdata}}</div>  </article> 

Here is a sample of the data (converted to JSON from XML using X2JS):

{     "blog": {         "article": [             {                 "id": "1",                 "author": "eat-sleep-code",                 "title": {                     "__cdata": "The first article."                 },                 "content": {                     "__cdata": "\n        This is my first article in my test site.\n      "                 },                 "createdate": "2014-05-09"             },             {                 "id": "2",                 "author": "eat-sleep-code",                 "title": {                     "__cdata": "The second article."                 },                 "content": {                     "__cdata": "\n        This is my second article in my test site.  This article's create date is actually earlier.\n      "                 },                 "createdate": "2014-05-08"             }         ]     } } 
like image 761
eat-sleep-code Avatar asked Jun 04 '14 22:06

eat-sleep-code


People also ask

What is ng-repeat end?

The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed.

How to use sorting in AngularJS?

To sort in descending order, set it as true . You can also use + to sort the data in an ascending and – the data in descending order also . Here with the filters in Angular JS, instead of displaying the various rows, we will be sorting it by ascending and descending order .

What is the Order of Keys returned in AngularJS?

The JavaScript specification does not define the order of keys returned for an object, so AngularJS relies on the order returned by the browser when running for key in myObj. Browsers generally follow the strategy of providing keys in the order in which they were defined, although there are exceptions when keys are deleted and reinstated.

What is ngrepeat in AngularJS and how to use it?

I ran into an issue today using the ngRepeat directive in AngularJS. ngRepeat let’s you iterate over a collection (array or object) and repeat a snippet of code for each of the items. Let’s look at a some examples first, before I get into my situation. Let’s assume we have an array of items set in our controller’s scope.

How do I get ngrepeat to work with objects in order?

If you are hitting any of these limitations, the recommended workaround is to convert your object into an array that is sorted into the order that you prefer before providing it to ngRepeat. You could do this with a filter such as toArrayFilteror implement a $watchon the object yourself. Tracking and Duplicates

What are the limitations of array iteration in AngularJS?

However, there are a few limitations compared to array iteration: The JavaScript specification does not define the order of keys returned for an object, so AngularJS relies on the order returned by the browser when running for key in myObj.


1 Answers

The reverse argument should be a boolean value.

Assuming you don't have reverse set to true or false somewhere in your controller, you should replace

orderBy:'createdate':reverse 

with

orderBy:'createdate':true 

Demo

orderBy docs

like image 117
Marc Kline Avatar answered Sep 21 '22 15:09

Marc Kline