web-dev-qa-db-fra.com

Filtre de classement par date décroissant dans AngularJs

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

Donc, le livre vient de repos api et il a de nombreux lecteurs attachés. Je veux avoir le lecteur "récent".

Le champ created_at a la valeur qui identifie l'utilisateur comme étant récent. Mais le code ci-dessus me donne le lecteur le plus âgé. Donc, l'ordre doit être inversé? Existe-t-il un moyen de trier par ordre décroissant?

angularjsangularjs-filter
132
Artjom Zabelin

Selon documentation , vous pouvez utiliser l'argument reverse.

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

Changez votre filtre en:

orderBy: 'created_at':true
211
CD..

Vous pouvez préfixer l'argument dans orderBy avec un '-' pour avoir un ordre décroissant plutôt que croissant. Je l'écrirais comme ceci:

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

Ceci est également indiqué dans la documentation du filtre orderBy .

175
Ludwig Magnusson

Peut-être que cela peut être utile pour quelqu'un:

Dans mon cas, je recevais un tableau d'objets, chacun contenant une date définie par Mongoose.

J'ai utilisé:

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

Et défini la fonction:

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

Cela a fonctionné pour moi.

41
igorauad

Et un exemple de code:

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

Et le JavaScript:

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

Te donnera:

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

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

17
Niels Bom

Tri décroissant par date

Il sera utile de filtrer les enregistrements avec la date dans l’ordre décroissant.

$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>
7
Dinesh Vaitage

Dans mon cas, le orderBy est déterminé par une zone de sélection. Je préfère la réponse de Ludwig parce que vous pouvez définir la direction du tri dans les options de sélection telles que:

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

balisage:

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

Mon conseil d'utilisation moment () est facile à gérer les dates s'il s'agit de valeurs de chaînes

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

voir des exemples w3schools: https://www.w3schools.com/angular/angular_filters.asphttps://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

puis ajoutez le drapeau "reverse":

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