Filtro decrescente per data in AngularJs

139

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

Quindi il libro viene dal resto api e ha molti lettori collegati. Voglio ottenere il lettore "recente".

Il created_atcampo ha il valore che identifica l'utente come recente. Ma il codice sopra mi dà il lettore più vecchio. Quindi l'ordine deve essere invertito? C'è un modo per disporre l'ordinamento in ordine decrescente?

angularjs angularjs-filter

— upvote
fonte

219

Secondo la documentazione è possibile utilizzare l' reverseargomento.

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

Cambia il filtro in:

orderBy: 'created_at':true

— CD..
fonte

21

Nota che :non è una virgola. (Per altre persone non osservanti)

— Reattivo

1

Se si desidera un pulsante di ordinamento, è possibile sostituire true con sortDirection. Quindi nel tuo ambito imposta $ scope.sortDirection = true. Il pulsante clic sarebbe simile a ng-click = "sortDirection =! SortDirection"

— mbokil

1

Funziona solo per la pagina con dati di tabella completi in un'unica pagina, ma non funzionerà per l'impaginazione.

— ANK

il collegamento alla documentazione è interrotto

— robert

180

Puoi aggiungere il prefisso all'argomento orderBycon un '-' per avere un ordine decrescente anziché crescente. Lo scriverei così:

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

Questo è anche indicato nella documentazione per l'ordine del filtro Da .

— Ludwig Magnusson
fonte

6

Grazie, questo è un bel modo semplice e veloce per invertire l'ordine.

— Luca

41

Forse questo può essere utile per qualcuno:

Nel mio caso, stavo ottenendo una serie di oggetti, ognuno contenente una data impostata da Mongoose.

Ero solito:

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

E definita la funzione:

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

Questo ha funzionato per me.

— igorauad
fonte

1

Grazie. Le mie date erano stringhe immesse in un formato MMMM gg, AAAA e non riuscivo a capire come ottenere angolare per ordinarle correttamente se non avessi usato un metodo che costruiva un oggetto data. Ha funzionato come un fascino.

— Zargoon,

Questo è il metodo corretto .. possiamo usare questo metodo in qualsiasi formato di data .. grazie capo

— Jethik

17

E un esempio di codice:

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

E il JavaScript:

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

Ti darà:

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

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

— Niels Bom
fonte

7

Decrescente Ordina per data

Aiuterà a filtrare i record con la data in ordine decrescente.

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

2

Nel mio caso, orderBy è determinato da una casella di selezione. Preferisco la risposta di Ludwig perché puoi impostare la direzione di ordinamento nelle opzioni di selezione in quanto tale:

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

1

questo non sembra funzionare con le funzioni di ordinamento personalizzate. C'è un modo per invertire l'ordinamento quando si utilizza una funzione orderBy personalizzata e si seleziona un parametro da ordinare da un <select> come nel tuo esempio?

— cre8value,

0

vedi esempi di w3schools: https://www.w3schools.com/angular/angular_filters.asp https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

quindi aggiungi il flag "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>

— ccampisano
fonte

0

Il mio consiglio use moment () è facile da gestire le date se sono valori di stringhe

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

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>

Espandi frammento

— Abdo-Host
fonte