Фильтр по убыванию по дате в AngularJs


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

Итак, книга взята из rest api, и к ней прикреплено много читателей. Я хочу получить «недавнего» читателя.

created_atПоле имеет значение , которое идентифицирует пользователя , как последние. Но приведенный выше код дает мне самого старого читателя. Значит, порядок нужно поменять? Есть ли способ сортировки по убыванию?

Ответы:


220

Согласно документации вы можете использовать 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,

ссылка на документацию не работает
Роберт

180

Вы можете поставить перед аргументом префикс orderBy'-', чтобы иметь порядок убывания, а не возрастания. Я бы написал это так:

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

Это также указано в документации к фильтру orderBy .


6
Спасибо, это хороший быстрый и простой способ отменить порядок.
LukeP

41

Возможно, это может кому-то пригодиться:

В моем случае я получал массив объектов, каждый из которых содержал дату, установленную Mongoose.

Я использовал:

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, и я не мог понять, как получить angular для их правильной сортировки, если я не использовал метод, который построил объект даты. Работал как шарм.
Zargoon

Это правильный метод ... мы можем использовать этот метод в любом формате даты ... спасибо, босс
Джетик

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 определяется полем выбора. Я предпочитаю ответ Людвига, потому что вы можете установить направление сортировки в параметрах выбора как таковое:

        $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

0

см. образцы w3schools: 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>

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>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.