ng-repetição angular no reverso

Como posso obter uma matriz invertida em angular? Estou tentando usar o orderBy filter, mas ele precisa de um predicado (por exemplo, ‘name’) para classificar:

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

Existe uma maneira de reverter matriz original, sem sorting. Curtiu isso:

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

Sugiro usar um filtro personalizado como este:

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

Que então pode ser usado como:

 
{{friend.name}}

Veja aqui trabalhando: Plunker Demonstration


Este filtro pode ser personalizado para atender às suas necessidades conforme apropriado. Eu forneci outros exemplos na demonstração. Algumas opções incluem a verificação de que a variável é uma matriz antes de executar o inverso ou torná-la mais leniente para permitir a reversão de mais coisas, como cadeias de caracteres.

Isso é o que eu usei:

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

Atualizar:

Minha resposta foi OK para a versão antiga do Angular. Agora você deveria estar usando

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

ou

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

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

Desculpem por isso depois de um ano, mas há uma solução nova e mais fácil , que funciona para o Angular v1.3.0-rc.5 e posterior .

É mencionado nos documentos : “Se nenhuma propriedade é fornecida, (por exemplo, ‘+’), então o próprio elemento da matriz é usado para comparar a sorting”. Então, a solução será:

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

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

Esta solução parece ser melhor porque não modifica uma matriz e não requer resources computacionais adicionais (pelo menos em nosso código). Eu li todas as respostas existentes e ainda prefiro esta para elas.

Você pode reverter pelo parâmetro $ index

  

Solução simples: – (não é necessário fazer nenhum método)

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

Você pode simplesmente chamar um método em seu escopo para reverter isso para você, assim:

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

Observe que o $scope.reverse cria uma cópia da matriz, pois o Array.prototype.reverse modifica a matriz original.

se você estiver usando 1.3.x, você pode usar o seguinte

 {{ orderBy_expression | orderBy : expression : reverse}} 

Exemplo Listar livros por data publicada em ordem decrescente

 

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

Se você estiver usando o angularjs versão 1.4.4 e acima , uma maneira fácil de classificar é usando o ” $ index “.

  
  • {{friend.name}}

ver demonstração

Ao usar o MVC no .NET com o Angular, você sempre pode usar o OrderByDecending () ao fazer sua consulta do db da seguinte forma:

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

Então, no lado Angular, ele já será revertido em alguns navegadores (IE). Ao dar suporte ao Chrome e ao FF, você precisaria adicionar orderBy:

  

Neste exemplo, você estaria classificando em ordem decrescente na propriedade .Id. Se você estiver usando paginação, isso fica mais complicado porque somente a primeira página seria classificada. Você precisaria lidar com isso por meio de um arquivo de filtro .js para seu controlador ou de alguma outra forma.

Você também pode usar .reverse (). É uma function de matriz nativa

{{friend.name}}

Isso porque você está usando o object JSON. Quando você enfrenta tais problemas, altere seu Objeto JSON para Objeto JSON Array.

Por exemplo,

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

O filtro orderBy realiza uma sorting estável a partir do Angular 1.4.5. (Veja o pedido pull do GitHub em https://github.com/angular/angular.js/pull/12408 .)

Portanto, é suficiente usar um predicado constante e reverse conjunto reverse para true :

 
{{friend.name}}

Eu encontrei algo assim, mas em vez de array eu uso objects.

Aqui está a minha solução para objects:

Adicionar filtro personalizado:

 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; }; }); 

Que então pode ser usado como

 

Se você precisar de suporte a navegadores antigos, precisará definir a function de redução (isso só está disponível no mozilla.org do ECMA-262)

 // 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; }; } 

Eu mesmo fiquei frustrado com esse problema e modifiquei o filtro que foi criado pelo @Trevor Senior quando estava tendo problemas com meu console dizendo que ele não podia usar o método reverso. Eu também queria manter a integridade do object, porque é isso que o Angular está usando originalmente em uma diretiva ng-repeat. Neste caso usei a input do stupid (key) porque o console vai ficar chateado dizendo que existem duplicatas e no meu caso eu precisei rastrear pelo $ index.

Filtro:

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

HTML:

Estou adicionando uma resposta que ninguém mencionou. Eu tentaria fazer o servidor fazê-lo se você tiver um. A filtragem do Clientside pode ser perigosa se o servidor retornar muitos registros. Porque você pode ser forçado a adicionar paginação. Se você tiver paginação do servidor, o filtro do cliente na ordem estará na página atual. O que confundiria o usuário final. Portanto, se você tiver um servidor, envie o orderby com a chamada e deixe o servidor retorná-lo.

Eu sugiro usar o método reverso nativo da matriz é sempre melhor escolha sobre a criação de filtro ou usando $index .

 
{{friend.name}}

Plnkr_demo .