I am having a problem with angularjs orderBy filter. I am trying to sort a list of items by date ascending or descending.

This is how my list looks like

...
<li ng-repeat="issue in content | myStatusFilter : selectedStatuses | orderBy : 'date' : selectedOption" class="toggle-list__row">
    <issue data="issue" />
</li>
...

Content is an array and each issue in content has a date and this date is saved as string. When the selectedOption is true this is what I get

1. Issue 3 - 31.01.2015
2. Issue 2 - 21.05.2015
3. Issue 4 - 10.06.2015
4. Issue 1 - 04.05.2014 -> should be first in the list actually

and when the selectedOption is false this is the output

1. Issue 1 - 04.05.2014 - should be the last one
2. Issue 4 - 10.06.2015
3. Issue 2 - 21.05.2015
4. Issue 3 - 31.01.2015

Could you please help me and tell me where is the mistake and how can I fix this issue.

Thx in advance

I am having a problem with angularjs orderBy filter. I am trying to sort a list of items by date ascending or descending.

This is how my list looks like

...
<li ng-repeat="issue in content | myStatusFilter : selectedStatuses | orderBy : 'date' : selectedOption" class="toggle-list__row">
    <issue data="issue" />
</li>
...

Content is an array and each issue in content has a date and this date is saved as string. When the selectedOption is true this is what I get

1. Issue 3 - 31.01.2015
2. Issue 2 - 21.05.2015
3. Issue 4 - 10.06.2015
4. Issue 1 - 04.05.2014 -> should be first in the list actually

and when the selectedOption is false this is the output

1. Issue 1 - 04.05.2014 - should be the last one
2. Issue 4 - 10.06.2015
3. Issue 2 - 21.05.2015
4. Issue 3 - 31.01.2015

Could you please help me and tell me where is the mistake and how can I fix this issue.

Thx in advance

• javascript
• angularjs

Share Improve this question Follow edited Jun 12, 2015 at 14:13 amsalk asked Jun 12, 2015 at 14:06 amsalkamsalk 59911 gold badge66 silver badges2626 bronze badges 5

• Can't you change your date format for year first, then month, then day? – sp00m Commented Jun 12, 2015 at 14:07
• 3 are your dates actual Date objects? – scniro Commented Jun 12, 2015 at 14:08
• "by date ascending and descending." At the same time? Your question is not clear. – AncientSwordRage Commented Jun 12, 2015 at 14:08
• @sal niro Dates are saved as string dd.MM.yyyy. – amsalk Commented Jun 12, 2015 at 14:11
• @Pureferret I am having a slecet where you can pick asc or desc order and because of that I have selectedOption in the filter as you can see in code and yes, the issues sould be ordered ascending or descending – amsalk Commented Jun 12, 2015 at 14:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Your dates are strings, not proper javascript date objects. Since you say you can't fix this on the server, you can atleast fix this in the controller or angular service.

Wherever you get your object that contains dates, loop through the objects and turn them into actual dates, like:

$http.get('something')
     .then(function(result) {
         result.forEach(function(item) {
            item.date = new Date(item.date.replace( /(\d{2}).(\d{2}).(\d{4})/, "$2/$1/$3")
         });
     });

You can pass a function to the order by filter. In that function convert your string into a date:

$scope.myDateOrderFunction = function(item) {
   var parts = item.date.split('.');
   return new Date(parts[2], parts[1], parts[0]);
};

and then you can call it from the view:

<li ng-repeat="issue in content | myStatusFilter : selectedStatuses | orderBy : myDateOrderFunction : selectedOption" class="toggle-list__row">
    <issue data="issue" />
</li>

Your dates are sorted alphabetically, either make them a Date object or store them as 'yyyy.mm.dd'

Here is an example (n.b. not originally written by me, but I have updated it)

<div ng-app>
      <div ng:controller="Main">
      <div ng:repeat="item in items | orderBy:'date'">{{$index}}: {{item.date | date}}</div>
    </div>
</div>
function Main($scope) {
    $scope.items = [
        {date: new Date('12/23/2013')},
        {date: new Date('12/23/2011')},
        {date: new Date('12/23/2010')},
        {date: new Date('12/23/2015')}
    ];
}

If your dates e form the backend, you need to write a service/factory to get these, then you'll have something like $scope.issues = IssueService.getIssues(). Which needs to return an array.