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:

<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>
<body ng-controller="ExampleController">
    <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
    <table class="friend">
      <tr>
        <th>
          <button ng-click="order('name')">Name</button>
          <span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
        </th>
        <th>
          <button ng-click="order('phone')">Phone Number</button>
          <span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
        </th>
        <th>
          <button ng-click="order('age')">Age</button>
          <span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
        </th>
      </tr>
      <tr ng-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:

Baca Juga

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

Solution 3:

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

HTML Code

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

JavaScript code

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

JavaScript Lib

Sorting Date In Angular Js

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Sorting Date In Angular Js"