Filtr malejąco według daty w AngularJs


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

Więc książka pochodzi z rest api i ma dołączonych wielu czytelników. Chcę dostać „ostatniego” czytelnika.

created_atPole ma wartość, która identyfikuje użytkownika jako ostatnie. Ale powyższy kod podaje mi najstarszego czytelnika. Więc kolejność musi zostać odwrócona? Czy istnieje sposób sortowania w porządku malejącym?

Odpowiedzi:


219

Zgodnie z dokumentacją możesz użyć reverseargumentu.

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

Zmień filtr na:

orderBy: 'created_at':true

21
Zauważ, że to :nie jest przecinek. (Dla innych nieobserwujących ludzi)
ReactiveRaven

1
Jeśli potrzebujesz przycisku sortowania, możesz zamienić true na sortDirection. Następnie w swoim zakresie ustaw $ scope.sortDirection = true. Przycisk kliknięcia będzie wyglądał następująco: ng-click = "sortDirection =! SortDirection"
mbokil

1
To działa tylko dla strony, która ma pełne dane tabeli na jednej stronie, ale nie będzie działać dla paginacji ..
ANK

link do dokumentacji jest uszkodzony
robert

180

Możesz poprzedzić argument orderByznakiem „-”, aby uzyskać porządek malejący zamiast rosnącego. Napisałbym to tak:

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

Jest to również określone w dokumentacji filtra OrderBy .


6
Dziękuję, to miły, szybki i łatwy sposób na odwrócenie kolejności.
LukeP

41

Być może może to być przydatne dla kogoś:

W moim przypadku otrzymywałem tablicę obiektów, z których każdy zawierał datę ustawioną przez Mongoose.

Użyłem:

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

I zdefiniował funkcję:

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

To zadziałało dla mnie.


1
Dziękuję Ci. Moje daty były ciągami znaków wpisanymi w formacie MMMM dd, RRRR i nie mogłem wymyślić, jak uzyskać kątowe, aby je poprawnie posortować, chyba że użyłem metody, która zbudowała obiekt daty. Działał jak urok.
Zargoon

To jest poprawna metoda .. możemy użyć tej metody w dowolnym formacie daty .. dzięki szefowi
Jethik

17

I przykład kodu:

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

Oraz JavaScript:

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

Da tobie:

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

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


7

Malejąco Sortuj według daty

Pomoże to filtrować rekordy z datą w porządku malejącym.

$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

W moim przypadku orderBy jest określane przez pole wyboru. Wolę odpowiedź Ludwiga, ponieważ możesz ustawić kierunek sortowania w wybranych opcjach jako takie:

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

narzut:

<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
to nie działa z niestandardowymi funkcjami sortowania. Czy istnieje sposób na odwrócenie sortowania podczas korzystania z funkcji niestandardowej orderBy i wybierania parametru do uporządkowania według <select>, jak w przykładzie?
cre8value

0

zobacz przykłady w3schools: https://www.w3schools.com/angular/angular_filters.asp https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

następnie dodaj flagę „wstecz”:

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

Moja rada dotycząca użycia funkcji moment () jest łatwa do zarządzania datami, jeśli są one wartościami ciągów

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.