以角度 js 格式排序日期

Sorting date in angular js

本文关键字：排序 日期 格式 js      更新时间：2023-09-26

我想在角度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 中对日期进行排序？

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 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 的链接：按相反顺序对日期进行排序

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

沃伊塔吉纳(vojtajina(找到了一个很好的例子。这是为此的jsfiddle。
http://jsfiddle.net/vojtajina/rvdww/6/

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

对于您的情况，您的用户对象中必须具有一些日期属性。 假设它是birthdate，那么您可以按相反的顺序排序，如下所示：

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

它可能会帮助你 http://jsfiddle.net/m7ynD/

网页代码 

<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')}
    };
}
相关文章：