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

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

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

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

angularjs angularjs-filter Голосовать за
источник

Ответы:

220

Согласно документации вы можете использовать reverseаргумент.

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

Измените свой фильтр на:

orderBy: 'created_at':true
CD..
источник
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>
Ccampisano
источник
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>
Развернуть фрагмент

Абдо-Хост
источник