以角js排序日期 [英] Sorting date in angular js
本文介绍了以角js排序日期的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在角度js中排序日期
I wanted to sort date in angular 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中排序日期？
I want to sort date in reverse order.How do I sort date in 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 PART：
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的链接：排序日期相反的顺序
Here is the link for the plunker: sorting date in reverse order
您可以将日期保持为ISO 8601
自然排序的字符串，并使用Angular的日期过滤器显示
的日期。
you can keep the dates as ISO 8601 strings which sort naturally and use Angular's date filter to display the dates.
通过vojtajina找到一个很好的例子。这是jsfiddle。
http://jsfiddle.net/vojtajina/ rvdww / 6 /
Found a good example by vojtajina. Here is the jsfiddle for that.
http://jsfiddle.net/vojtajina/rvdww/6/
这篇关于以角js排序日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
