AngularJs中按日期降序过滤


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

因此,该书来自rest api,并附有许多读者。我想获得“最近”的读者。

created_at字段具有将用户标识为最近的值。但是上面的代码给了我最老的读者。因此顺序需要颠倒吗?有什么办法可以使降序排序?

Answers:


219

根据文档,您可以使用reverse参数。

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

将您的过滤器更改为:

orderBy: 'created_at':true

21
请注意,它:不是逗号。(对于其他非观察员)
ReactiveRaven

1
如果需要排序按钮,可以将true替换为sortDirection。然后在您的范围内设置$ scope.sortDirection = true。单击按钮看起来像ng-click =“ sortDirection =!sortDirection”
mbokil

1
这些为页唯一的工作是有完整的表数据在一个单一的页面,但它会为分页不工作..
ANK

文档的链接已损坏
罗伯特(Robert)


41

也许这对某人可能有用:

就我而言,我得到了一个对象数组,每个对象包含由猫鼬设置的日期。

我用了:

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

并定义了功能:

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

这对我有用。


1
谢谢。我的日期是以MMMM dd,YYYY格式输入的字符串,除非使用构造日期对象的方法,否则我无法弄清楚如何正确地对它们进行排序。像魅力一样工作。
Zargoon

这是正确的方法..我们可以使用任何日期格式的方法..谢谢老板
Jethik 2016年

17

和一个代码示例:

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


7

按日期降序

这将有助于按日期降序过滤记录。

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

2

在我的情况下,orderBy由选择框确定。我更喜欢Ludwig的回答,因为您可以在select选项中设置排序方向,如下所示:

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

1
这似乎不适用于自定义排序功能。使用自定义orderBy函数并从<select>中选择要排序的参数时,是否有一种反向排序的方法?
cre8value 2014年

0

请参阅w3schools示例:https : //www.w3schools.com/angular/angular_filters.asp https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

然后添加“ reverse”标志:

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

0

我的建议使用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"

0

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>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.