Orden descendente por filtro de fecha en AngularJs

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

Entonces, el libro proviene de la API de descanso y tiene muchos lectores adjuntos. Quiero obtener el lector 'reciente'.

El created_atcampo tiene el valor que identifica al usuario como reciente. Pero el código anterior me da el lector más viejo. Entonces, ¿el orden debe ser inverso? ¿Hay alguna manera de tener la clasificación en orden descendente?

angularjs angularjs-filter Voto a favor
fuente

Respuestas:

219

De acuerdo con la documentación , puede usar el reverseargumento.

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

Cambia tu filtro a:

orderBy: 'created_at':true
DISCOS COMPACTOS..
fuente
21
Tenga en cuenta que :no es una coma. (Para otras personas no observantes)
ReactiveRaven
1
Si desea un botón de clasificación, puede reemplazar true con sortDirection. Luego, en su alcance, establezca $ scope.sortDirection = true. El botón de clic se vería como ng-click = "sortDirection =! SortDirection"
mbokil
1
Esto funciona solo para la página que tiene datos de tabla completos en una sola página, pero no funcionará para la paginación ...
ANK
el enlace a la documentación está roto
robert
180

Puede anteponer el argumento orderBycon un '-' para tener un orden descendente en lugar de ascendente. Lo escribiría así:

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

Esto también se indica en la documentación del filtro orderBy .

Ludwig Magnusson
fuente
66
Gracias, esta es una manera rápida y fácil de invertir el orden.
LukeP
41

Quizás esto pueda ser útil para alguien:

En mi caso, estaba obteniendo una variedad de objetos, cada uno con una fecha establecida por Mongoose.

Solía:

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

Y definió la función:

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

Esto funcionó para mí.

igorauad
fuente
1
Gracias. Mi fecha eran cadenas ingresadas en un formato MMMM dd, AAAA, y no pude encontrar la forma de obtener un ángulo para ordenarlas correctamente a menos que usara un método que construyera un objeto de fecha. Trabajado como un encanto.
Zargoon
Este es el método correcto ... podemos usar este método en cualquier formato de fecha ... gracias jefe
Jethik
17

Y un ejemplo de código:

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

Y el JavaScript:

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

Te regalaré:

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

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

Niels Bom
fuente
7

Descendente Ordenar por fecha

Ayudará a filtrar registros con fecha en orden descendente.

$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
fuente
2

En mi caso, el orderBy está determinado por un cuadro de selección. Prefiero la respuesta de Ludwig porque puedes establecer la dirección de clasificación en las opciones de selección como tal:

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

margen:

<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>
Miguel
fuente
1
Esto no parece funcionar con funciones de clasificación personalizadas. ¿Hay alguna manera de revertir la ordenación cuando se utiliza una función orderBy personalizada y se selecciona un parámetro para ordenar desde un <select> como en su ejemplo?
cre8value
0

ver ejemplos de w3schools: https://www.w3schools.com/angular/angular_filters.asp https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

luego agregue la bandera "reversa":

<!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
fuente
0

Mi consejo use moment () es fácil de administrar fechas si son valores de cadena

//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
fuente
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>
Expandir fragmento

Abdo-Host
fuente