angular ng-repeat al contrario

Come posso ottenere un array invertito in angular? Sto cercando di usare il filtro orderBy, ma ha bisogno di un predicato (ad esempio ‘nome’) per ordinare:

 {{friend.name}} {{friend.phone}} {{friend.age}}  

C’è un modo per invertire la matrice originale, senza ordinare. come quello:

  {{friend.name}} {{friend.phone}} {{friend.age}}  

Ti suggerirei di utilizzare un filtro personalizzato come questo:

 app.filter('reverse', function() { return function(items) { return items.slice().reverse(); }; }); 

Quale può quindi essere usato come:

 
{{friend.name}}

Guardalo mentre lavora qui: dimostrazione Plunker


Questo filtro può essere personalizzato in base alle tue esigenze. Ho fornito altri esempi nella dimostrazione. Alcune opzioni includono il controllo che la variabile sia una matrice prima di eseguire l’inverso, o renderla più indulgente per consentire l’inversione di più cose come le stringhe.

Questo è quello che ho usato:

 {{$index + 1}}: {{alert.msg}} 

Aggiornare:

La mia risposta era OK per la vecchia versione di Angular. Ora dovresti usare

ng-repeat="friend in friends | orderBy:'-'"

o

 ng-repeat="friend in friends | orderBy:'+':true" 

da https://stackoverflow.com/a/26635708/1782470

Ci scusiamo per averlo presentato dopo un anno, ma esiste una soluzione nuova e più semplice , che funziona per Angular v1.3.0-rc.5 e versioni successive .

Viene menzionato nei documenti : “Se non viene fornita alcuna proprietà (ad es. ‘+’), Allora l’elemento dell’array stesso viene usato per confrontare dove ordinare”. Quindi, la soluzione sarà:

ng-repeat="friend in friends | orderBy:'-'" o

ng-repeat="friend in friends | orderBy:'+':true"

Questa soluzione sembra essere migliore perché non modifica un array e non richiede risorse computazionali aggiuntive (almeno nel nostro codice). Ho letto tutte le risposte esistenti e preferisco ancora questo a loro.

È ansible invertire con il parametro $ index

  

Soluzione semplice: – (non c’è bisogno di fare alcun metodo)

 ng-repeat = "friend in friends | orderBy: reverse:true" 

Puoi semplicemente chiamare un metodo sul tuo scope per invertire per te, in questo modo:

         
  • {{item}}
  • {{item}}

Si noti che $scope.reverse crea una copia dell’array poiché Array.prototype.reverse modifica l’array originale.

se si utilizza 1.3.x, è ansible utilizzare quanto segue

 {{ orderBy_expression | orderBy : expression : reverse}} 

Esempio Elenca i libri per data di pubblicazione in ordine decrescente

 

fonte: https://docs.angularjs.org/api/ng/filter/orderBy

Se stai usando angularjs versione 1.4.4 e successive , un modo semplice per ordinare è usare ” $ index “.

  
  • {{friend.name}}

guarda la demo

Quando si utilizza MVC in .NET con Angular, è sempre ansible utilizzare OrderByDecending () quando si esegue la query db in questo modo:

 var reversedList = dbContext.GetAll().OrderByDecending(x => x.Id).ToList(); 

Quindi sul lato Angolare, sarà già invertito in alcuni browser (IE). Quando si supporta Chrome e FF, è necessario aggiungere l’ordine per:

  

In questo esempio, starai ordinando in ordine discendente sulla proprietà .Id. Se si utilizza il paging, questo diventa più complicato perché solo la prima pagina verrà ordinata. Dovresti gestirlo tramite un file di filtro .js per il tuo controller o in qualche altro modo.

Puoi anche usare .reverse (). È una funzione di matrice nativa

{{friend.name}}

Questo perché stai usando JSON Object. Quando si affrontano tali problemi, cambiare l’object JSON in object array JSON.

Per esempio,

 {"India":"IN","America":"US","United Kingdon":"UK"} json object [{"country":"India","countryId":"IN"},{"country":"America","countryId":"US"},{"country":"United Kingdon","countryId":"UK"}] 

Il filtro orderBy esegue un ordinamento stabile a partire da Angular 1.4.5. (Vedi la richiesta pull GitHub https://github.com/angular/angular.js/pull/12408 .)

Quindi è sufficiente usare un predicato costante e il reverse set su true :

 
{{friend.name}}

Ho trovato qualcosa di simile, ma invece di array io uso gli oggetti.

Ecco la mia soluzione per gli oggetti:

Aggiungi un filtro personalizzato:

 app.filter('orderObjectBy', function() { return function(items, field, reverse){ var strRef = function (object, reference) { function arr_deref(o, ref, i) { return !ref ? o : (o[ref.slice(0, i ? -1 : ref.length)]); } function dot_deref(o, ref) { return !ref ? o : ref.split('[').reduce(arr_deref, o); } return reference.split('.').reduce(dot_deref, object); }; var filtered = []; angular.forEach(items, function(item) { filtered.push(item); }); filtered.sort(function (a, b) { return (strRef(a, field) > strRef(a, field) ? 1 : -1); }); if(reverse) filtered.reverse(); return filtered; }; }); 

Quale può quindi essere usato come

 

Se hai bisogno del vecchio supporto per browser, dovrai definire la funzione di riduzione (disponibile solo in ECMA-262 mozilla.org )

 // Production steps of ECMA-262, Edition 5, 15.4.4.21 // Reference: http://es5.github.io/#x15.4.4.21 if (!Array.prototype.reduce) { Array.prototype.reduce = function(callback /*, initialValue*/) { 'use strict'; if (this == null) { throw new TypeError('Array.prototype.reduce called on null or undefined'); } if (typeof callback !== 'function') { throw new TypeError(callback + ' is not a function'); } var t = Object(this), len = t.length >>> 0, k = 0, value; if (arguments.length == 2) { value = arguments[1]; } else { while (k < len && !(k in t)) { k++; } if (k >= len) { throw new TypeError('Reduce of empty array with no initial value'); } value = t[k++]; } for (; k < len; k++) { if (k in t) { value = callback(value, t[k], k, t); } } return value; }; } 

Mi ero sentito frustrato da questo problema e quindi ho modificato il filtro creato da @Trevor Senior mentre stavo correndo un problema con la mia console dicendo che non poteva usare il metodo inverso. Inoltre, volevo mantenere l’integrità dell’object perché questo è ciò che Angular utilizza originariamente in una direttiva ng-repeat. In questo caso ho usato l’input di stupid (chiave) perché la console si arrabbierà dicendo che ci sono duplicati e nel mio caso dovevo tenere traccia di $ index.

Filtro:

 angular.module('main').filter('reverse', function() { return function(stupid, items) { var itemss = items.files; itemss = itemss.reverse(); return items.files = itemss; }; }); 

HTML:

Sto aggiungendo una risposta che nessuno ha menzionato. Vorrei provare a farlo fare al server se ne hai uno. Il filtraggio del client può essere pericoloso se il server restituisce molti record. Perché potresti essere costretto ad aggiungere il paging. Se si dispone di cercapersone dal server, il filtro client su ordine si troverà nella pagina corrente. Quale confonderebbe l’utente finale. Quindi se hai un server, invia l’ordine con la chiamata e lascia che il server lo restituisca.

Vorrei usare il metodo reverse nativo per array è sempre una scelta migliore rispetto alla creazione di filtri o all’utilizzo di $index .

 
{{friend.name}}

Plnkr_demo .