javascript with ng-repetição angular no reverso




title attribute html (14)

Isso porque você está usando o objeto 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"}] 

Como posso obter um array invertido em angular? Estou tentando usar o orderBy filter, mas ele precisa de um predicado (por exemplo, 'name') para classificar:

<tr ng-repeat="friend in friends | orderBy:'name':true">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
<tr>

Existe uma maneira de inverter matriz original, sem classificação. Curtiu isso:

<tr ng-repeat="friend in friends | orderBy:'':true">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
<tr>

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

 <ul>
  <li ng-repeat="friend in friends|orderBy:$index:true">{{friend.name}}</li>
</ul>

ver demonstração


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

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

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

<div ng-repeat="friend in friends.reverse()">{{friend.name}}</div>

Plnkr_demo .


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.


Isso é o que eu usei:

<alert ng-repeat="alert in alerts.slice().reverse()" type="alert.type" close="alerts.splice(index, 1)">{{$index + 1}}: {{alert.msg}}</alert>

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://.com/a/26635708/1782470


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

<div ng-repeat="book in books|orderBy:'publishedDate':true">

fonte: docs


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 objeto porque é isso que o Angular está usando originalmente em uma diretiva ng-repeat. Neste caso eu usei a entrada do stupid (key) porque o console vai ficar chateado dizendo que há 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: <div ng-repeat="items in items track by $index | reverse: items">


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:

<div ng-repeat="friend in friends | reverse">{{friend.name}}</div>

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.


Você pode reverter pelo parâmetro $ index

<tr ng-repeat="friend in friends | orderBy:'$index':true">

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

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

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

<div ng-repeat="(key, value) in items | orderObjectBy:'field.any.deep':true">

Se você precisar de suporte a navegadores antigos, precisará definir a função de redução (isso só está disponível em 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;
};
}

Dica útil:

Você pode reverter sua matriz com baunilha Js: yourarray .reverse ()

Cuidado: reverso é destrutivo, então ele mudará seu array, não apenas a variável.


Você também pode usar .reverse (). É uma função de matriz nativa

<div ng-repeat="friend in friends.reverse()">{{friend.name}}</div>


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 docs : "Se nenhuma propriedade é fornecida, (por exemplo, '+'), então o próprio elemento da matriz é usado para comparar a classificação". 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 recursos computacionais adicionais (pelo menos em nosso código). Eu li todas as respostas existentes e ainda prefiro esta para elas.





angularjs-ng-repeat