Descending order by date filter in AngularJs

小开

最佳答案

根据文件，可以使用 reverse参数。

filter:orderBy(array, expression[, reverse]);

将过滤器更改为:

orderBy: 'created_at':true

小开

您可以在 orderBy中的参数前加一个’-’，使其具有降序而不是升序。我会这样写:

<div class="recent"
ng-repeat="reader in book.reader | orderBy: '-created_at' | limitTo: 1">
</div>

这在过滤器 OrderBy的文档中也有说明。

小开

还有一个代码示例:

<div ng-app>
<div ng-controller="FooController">
<ul ng-repeat="item in items | orderBy:'num':true">
<li>\{\{item.num}} :: \{\{item.desc}}</li>
</ul>
</div>
</div>

还有 JavaScript:

function FooController($scope) {
$scope.items = [
{desc: 'a', num: 1},
{desc: 'b', num: 2},
{desc: 'c', num: 3},
];
}

会给你:

3 :: c
2 :: b
1 :: a

在 JSFiddle: http://jsfiddle.net/agjqN/

小开

也许这对某些人有用:

在我的例子中，我获得了一个对象数组，每个对象包含一个由 Mongoose 设置的日期。

我用:

ng-repeat="comment in post.comments | orderBy : sortComment : true"

并定义了函数:

$scope.sortComment = function(comment) {
var date = new Date(comment.created);
return date;
};

这招对我很管用。

小开

在我的示例中，orderBy 由一个选择框确定。我更喜欢路德维希的回答，因为您可以在选择选项中设置排序方向:

        $scope.options = [
{ label: 'Title', value: 'title' },
{ label: 'Newest', value: '-publish_date' },
{ label: 'Featured', value: '-featured' }
];

标价:

<select ng-model="orderProp" ng-options="opt as opt.label for opt in options"></select>
<ul>
<li ng-repeat="item in items | orderBy:orderProp.value"></li>
</ul>

小开

按日期递减排序

它将有助于按降序筛选日期记录。

$scope.logData = [
{ event: 'Payment', created_at: '04/05/17 6:47 PM PST' },
{ event: 'Payment', created_at: '04/06/17 12:47 AM PST' },
{ event: 'Payment', created_at: '04/05/17 1:50 PM PST' }
];


<div ng-repeat="logs in logData | orderBy: '-created_at'" >
\{\{logs.event}}
</div>

小开

参阅 w3学校样本: Https://www.w3schools.com/angular/angular_filters.asp Https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

然后加上“反向”标志:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>


<p>Click the table headers to change the sorting order:</p>


<div ng-app="myApp" ng-controller="namesCtrl">


<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy:reverse">
<td>\{\{x.name}}</td>
<td>\{\{x.country}}</td>
</tr>
</table>


</div>


<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];


$scope.reverse=false;
$scope.orderByMe = function(x) {


if($scope.myOrderBy == x) {
$scope.reverse=!$scope.reverse;
}
$scope.myOrderBy = x;
}
});
</script>


</body>
</html>

小开

我的建议是，如果日期是字符串值，那么 use moment ()很容易管理

//controller
$scope.sortBooks = function (reader) {
var date = moment(reader.endDate, 'DD-MM-YYYY');
return date;
};


//template


ng-repeat="reader in book.reader | orderBy : sortBooks : true"

小开

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


myApp.filter("toArray", function () {
return function (obj) {
var result = [];
angular.forEach(obj, function (val, key) {
result.push(val);
});
return result;
};
});




myApp.controller("mainCtrl", function ($scope) {


$scope.logData = [
{ event: 'Payment', created_at: '10/10/2019 6:47 PM PST' },
{ event: 'Payment', created_at: '20/10/2019 12:47 AM PST' },
{ event: 'Payment', created_at: '30/10/2019 1:50 PM PST' }
];
        

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>


<div ng-app="myApp" ng-controller="mainCtrl">


<h4>Descending</h4>
<ul>
<li ng-repeat="logs in logData | toArray | orderBy:'created_at':true" >
\{\{logs.event}} - Date : \{\{logs.created_at}}
</li>
</ul>
  

<br>
  

  

<h4>Ascending</h4>
<ul>
<li ng-repeat="logs in logData | toArray | orderBy:'created_at':false" >
\{\{logs.event}} - Date : \{\{logs.created_at}}
</li>
</ul>
  

</div>