Filter für absteigende Reihenfolge nach Datum in AngularJs

139

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

Das Buch stammt also von Rest API und hat viele Leser angehängt. Ich möchte den "letzten" Leser bekommen.

Das created_atFeld hat den Wert, der den Benutzer als aktuell identifiziert. Aber der obige Code gibt mir den ältesten Leser. Also muss die Reihenfolge umgekehrt werden? Gibt es eine Möglichkeit, die Sortierung in absteigender Reihenfolge durchzuführen?

angularjs angularjs-filter

— Upvote
quelle

219

Laut Dokumentation können Sie das reverseArgument verwenden.

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

Ändern Sie Ihren Filter in:

orderBy: 'created_at':true

— CD..
quelle

21

Beachten Sie, dass es :kein Komma ist. (Für andere nicht beobachtende Personen)

— ReactiveRaven

1

Wenn Sie eine Sortierschaltfläche möchten, können Sie true durch sortDirection ersetzen. Dann setzen Sie in Ihrem Bereich $ scope.sortDirection = true. Die Klick-Schaltfläche würde aussehen wie ng-click = "sortDirection =! SortDirection"

— mbokil

1

Diese funktionieren nur für die Seite, die vollständige Tabellendaten auf einer einzelnen Seite enthält, aber nicht für die Paginierung.

— ANK

Link zur Dokumentation ist defekt

— Robert

180

Sie können dem Argument orderByein '-' voranstellen , um eine absteigende Reihenfolge anstelle einer aufsteigenden Reihenfolge zu erhalten. Ich würde es so schreiben:

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

Dies ist auch in der Dokumentation zum Filter orderBy angegeben .

— Ludwig Magnusson
quelle

6

Vielen Dank, dies ist eine schöne schnelle und einfache Möglichkeit, die Reihenfolge umzukehren.

— LukeP

41

Vielleicht kann dies für jemanden nützlich sein:

In meinem Fall erhielt ich eine Reihe von Objekten, die jeweils ein von Mongoose festgelegtes Datum enthielten.

Ich benutzte:

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

Und definierte die Funktion:

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

Das hat bei mir funktioniert.

— igorauad
quelle

1

Danke dir. Meine Datumsangaben waren Zeichenfolgen, die in einem MMMM-TT-, JJJJ-Format eingegeben wurden, und ich konnte nicht herausfinden, wie man Winkel erhält, um sie korrekt zu sortieren, es sei denn, ich habe eine Methode verwendet, die ein Datumsobjekt erstellt. Lief wie am Schnürchen.

— Zargoon

Dies ist die richtige Methode. Wir können diese Methode in jedem Datumsformat verwenden. Danke Boss

— Jethik

17

Und ein Codebeispiel:

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

Und das JavaScript:

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

Werde dir geben:

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

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

— Niels Bom
quelle

7

Absteigend Nach Datum sortieren

Es ist hilfreich, Datensätze mit Datum in absteigender Reihenfolge zu filtern.

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

2

In meinem Fall wird die Bestellung durch ein Auswahlfeld bestimmt. Ich bevorzuge Ludwigs Antwort, weil Sie die Sortierrichtung in den Auswahloptionen als solche festlegen können:

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

Markup:

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

1

Dies scheint mit benutzerdefinierten Sortierfunktionen nicht zu funktionieren. Gibt es eine Möglichkeit, die Sortierung umzukehren, wenn Sie eine benutzerdefinierte orderBy-Funktion verwenden und einen Parameter auswählen, nach dem aus einer <Auswahl> sortiert werden soll, wie in Ihrem Beispiel?

— cre8value

0

Siehe Beispiele für w3schools: https://www.w3schools.com/angular/angular_filters.asp https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

Fügen Sie dann das "Reverse" -Flag hinzu:

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

0

Mein Ratschlag use moment () ist einfach zu verwalten, wenn es sich um Zeichenfolgenwerte handelt

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

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>

Erweitern Sie das Snippet

— Abdo-Host
quelle