javascript - with - title attribute html




ng-repetição angular no reverso (12)

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>

Ao usar o MVC no .NET com Angular, você sempre pode usar OrderByDecending () ao fazer sua consulta do banco de dados 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 suportar o Chrome e o FF, você precisaria adicionar orderBy:

<tr ng-repeat="item in items | orderBy:'-Id'">

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.


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.


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

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


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


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"}] 

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"

Você pode reverter pelo parâmetro $ index

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

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

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('myApp', []).controller('Ctrl', function($scope) {
        $scope.items = [1, 2, 3, 4];
        $scope.reverse = function(array) {
            var copy = [].concat(array);
            return copy.reverse();
        }
    });
    </script>
</head>
<body ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <ul>
        <li ng-repeat="item in reverse(items)">{{item}}</li>
    </ul>
</body>
</html>

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

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

fonte: docs


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.





angularjs-ng-repeat