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?

angularjs angularjs-filter Głosuj za
źródło

Odpowiedzi:

219

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

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

Zmień filtr na:

orderBy: 'created_at':true
PŁYTA CD..
źródło
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 .

Ludwig Magnusson
źródło
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.

igorauad
źródło
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/

Niels Bom
źródło
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>
Dinesh Vaitage
źródło
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>
Michael
źródło
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>
ccampisano
źródło
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"
pabloRN
źródło
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>
Rozwiń fragment

Abdo-Host
źródło