Question

我想在角度js中对日期进行排序

我正在使用

  orderBy:predicate :reverse

例如

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

我的js有以下

   $scope.predicate = 'date';
            $scope.reverse = true;
            $scope.order = function (predicate) {
                $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
                $scope.predicate = predicate;
            }

My HTML for sorting date is 

         <div class="col-xs-3 col-lg-3 heading-date headerStyle">
          <b class="date-heading" ng-click="order('CreatedDate')">Date</b>
          <span class="sortorder"                                                                                                        
           ng-show="predicate === 'CreatedDate'"                                                                                                                 
           ng-class="{reverse:reverse}"></span>

我想以相反的顺序对日期进行排序。如何在Angular js中对日期进行排序？

Answer 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>

以下是plunker的链接：sorting date in reverse order

您可以将日期保留为ISO 8601 自然排序并使用Angular的日期过滤器显示的字符串日期。

vojtajina找到了一个很好的例子。这是jsfiddle。左 http://jsfiddle.net/vojtajina/rvdww/6/

Answer 2

为了在angularjs中对日期进行排序，您可以在日期属性orderBy上使用negation。

对于您的情况，您必须在用户对象中具有一些日期属性。让我们说它是birthdate，那么你可以按照相反的顺序排序：

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

Answer 3

它可能对您有所帮助http://jsfiddle.net/m7ynD/

HTML代码

<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代码

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')}
    };
}

以角度js排序日期

3 个答案: