Filtre par ordre décroissant de date dans AngularJs

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

Donc, le livre vient de l'api de repos et il a de nombreux lecteurs attachés. Je veux obtenir le lecteur «récent».

Le created_atchamp a la valeur qui identifie l'utilisateur comme récent. Mais le code ci-dessus me donne le lecteur le plus ancien. L'ordre doit donc être inversé? Existe-t-il un moyen d'avoir le tri dans l'ordre décroissant?

angularjs angularjs-filter Vote favorable
la source

Réponses:

219

Selon la documentation, vous pouvez utiliser l' reverseargument.

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

Changez votre filtre pour:

orderBy: 'created_at':true
CD..
la source
21
Notez que ce :n'est pas une virgule. (Pour les autres personnes non pratiquantes)
ReactiveRaven
1
Si vous vouliez un bouton de tri, vous pouvez remplacer true par sortDirection. Ensuite, dans votre champ d'application, définissez $ scope.sortDirection = true. Le bouton de clic ressemblerait à ng-click = "sortDirection =! SortDirection"
mbokil
1
Celles-ci ne fonctionnent que pour la page contenant des données de table complètes sur une seule page, mais cela ne fonctionnera pas pour la pagination ..
ANK
lien vers la documentation est cassé
robert
180

Vous pouvez faire précéder l'argument orderByd'un «-» pour avoir un ordre décroissant au lieu de 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 .

Ludwig Magnusson
la source
6
Merci, c'est un moyen simple et rapide d'inverser l'ordre.
LukeP
41

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

Dans mon cas, je recevais un tableau d'objets, chacun contenant une date fixée 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.

igorauad
la source
1
Je vous remercie. Mes dates étaient des chaînes entrées au format MMMM jj, AAAA, et je ne pouvais pas comprendre comment devenir angulaire pour les trier correctement à moins d'utiliser une méthode qui construit un objet de date. A travaillé comme un charme.
Zargoon
C'est la méthode correcte .. nous pouvons utiliser cette méthode dans n'importe quel format de date .. merci patron
Jethik
17

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/

Niels Bom
la source
7

Tri décroissant par date

Cela aidera à 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>
Dinesh Vaitage
la source
2

Dans mon cas, le orderBy est déterminé par une boîte de sélection. Je préfère la réponse de Ludwig car vous pouvez définir la direction de tri dans les options de sélection en tant que telle:

        $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>
Michael
la source
1
cela ne semble pas fonctionner avec les fonctions de tri personnalisées. Existe-t-il un moyen d'inverser le tri lors de l'utilisation d'une fonction orderBy personnalisée et de la sélection d'un paramètre à trier à partir d'un <select> comme dans votre exemple?
cre8value
0

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

puis ajoutez le drapeau "inverse":

<!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
la source
0

Mon conseil d'utilisation moment () est facile à gérer les dates si ce sont des 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"
pabloRN
la source
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>
Développer l'extrait

Abdo-hôte
la source