Sorting Date In Angular Js

Question

I wanted to sort date in angular js i'm using orderBy:predicate :reverse For Example

My js

Solution 1:

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
app.controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
  var orderBy = $filter('orderBy');
  $scope.Stores = [
   { name: 'John',    phone: '555-1212',    age: '2011-06-11T00:00:00.000Z' },
{ name: 'Mary',    phone: '555-9876',    age: '2011-06-12T00:00:00.000Z' },
{ name: 'Mike',    phone: '555-4321',    age: '2011-07-13T00:00:00.000Z' },
{ name: 'Adam',    phone: '555-5678',    age: '2011-05-14T00:00:00.000Z' },
{ name: 'Julie',   phone: '555-8765',    age: '2011-06-15T00:00:00.000Z' }
  ];
  $scope.order = function(predicate) {
    $scope.predicate = predicate;
    $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
    $scope.friends = orderBy($scope.friends, predicate, $scope.reverse);
  };
  $scope.order('age', true);
}]);

HTML PART:

<htmlng-app="plunker"><head><metacharset="utf-8" /><title>AngularJS Plunker</title><script>document.write('<base href="' + document.location + '" />');</script><linkrel="stylesheet"href="style.css" /><scriptdata-require="angular.js@1.4.x"src="https://code.angularjs.org/1.4.9/angular.js"data-semver="1.4.9"></script><scriptsrc="app.js"></script></head><bodyng-controller="ExampleController"><pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre><tableclass="friend"><tr><th><buttonng-click="order('name')">Name</button><spanclass="sortorder"ng-show="predicate === 'name'"ng-class="{reverse:reverse}"></span></th><th><buttonng-click="order('phone')">Phone Number</button><spanclass="sortorder"ng-show="predicate === 'phone'"ng-class="{reverse:reverse}"></span></th><th><buttonng-click="order('age')">Age</button><spanclass="sortorder"ng-show="predicate === 'age'"ng-class="{reverse:reverse}"></span></th></tr><trng-repeat="user in Stores|orderBy:predicate:reverse"><td>{{user.name}}</td><td>{{user.phone}}</td><td>{{user.age | date:'d MMM yyyy'}}</td></tr></table></body></html>

Here is the link for the plunker: sorting date in reverse order

you can keep the dates as ISO 8601 strings which sort naturally and use Angular's date filter to display the dates.

Found a good example by vojtajina. Here is the jsfiddle for that. http://jsfiddle.net/vojtajina/rvdww/6/

Solution 2:

In order to sort date in angularjs, you can use orderBy on date property with negation.

For your case, you must be having some date property in your user object. let's say it is birthdate, then you can sort in reverse order like this:

 <div class="list" ng-repeat="user in Stores| orderBy:'-birthdate'">

Solution 3:

It might help you http://jsfiddle.net/m7ynD/

HTML Code

<divng-app><scripttype="text/javascript"src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script><divng-controller="Main"><divng-repeat="(id, i) in items | orderBy:'date'">{{id}}: {{i.date | date}}</div></div></div>

JavaScript code

functionMain($scope) {
    $scope.items = {
        0: {date: newDate('12/23/2013')},
        1: {date: newDate('12/23/2011')},
        2: {date: newDate('12/23/2010')},
        3: {date: newDate('12/23/2015')}
    };
}

JavaScript Gen

Sorting Date In Angular Js

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Sorting Date In Angular Js"