javascript - change - angular ng-repetir a la inversa

change title angular 4

Question

¿Cómo puedo obtener una matriz invertida en angular? Estoy intentando usar el filtro orderBy, pero necesita un predicado (por ejemplo, ''nombre'') para ordenar:

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

¿Hay una manera de revertir la matriz original, sin clasificar. como eso:

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

Answer 1

Cuando use MVC en .NET con Angular, siempre puede usar OrderByDecending () cuando haga su consulta de db de esta manera:

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

Luego, en el lado angular, ya se invertirá en algunos navegadores (IE). Cuando admita Chrome y FF, deberá agregar orderBy:

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

En este ejemplo, estaría clasificando en orden descendente en la propiedad .Id. Si está utilizando la paginación, esto se complica porque solo se ordenaría la primera página. Necesitaría manejar esto a través de un archivo de filtro .js para su controlador, o de alguna otra manera.

Answer 2

El filtro orderBy realiza una clasificación estable a partir de Angular 1.4.5. (Consulte la solicitud de extracción de GitHub https://github.com/angular/angular.js/pull/12408 ).

Por lo tanto, es suficiente usar un predicado constante y reverse conjunto reverse a true :

<div ng-repeat="friend in friends | orderBy:0:true">{{friend.name}}</div>

Answer 3

Encontré algo como esto, pero en lugar de una matriz, uso objetos.

Aquí está mi solución para los objetos:

Añadir 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 luego se puede utilizar como

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

Si necesita un soporte de navegador antiguo, deberá definir la función de reducción (esto solo está disponible en 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;
};
}

Answer 4

Eso es porque estás usando el objeto JSON. Cuando enfrente este tipo de problemas, cambie su objeto JSON por JSON Array Object.

Por ejemplo,

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

Answer 5

Esto es lo que he usado:

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

Actualizar:

Mi respuesta fue correcta para la versión antigua de Angular. Ahora, deberías estar usando

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

o

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

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

Answer 6

Estoy agregando una respuesta que nadie mencionó. Intentaría hacer que el servidor lo hiciera si tiene uno. El filtrado del lado del cliente puede ser peligroso si el servidor devuelve muchos registros. Debido a que podría ser obligado a agregar la paginación. Si tiene una paginación desde el servidor, el filtro de cliente en orden, estaría en la página actual. Lo que confundiría al usuario final. Entonces, si tiene un servidor, envíe el pedido con la llamada y deje que el servidor lo devuelva.

Answer 7

Lo siento por mencionar esto después de un año, pero hay una solución nueva y más fácil , que funciona para Angular v1.3.0-rc.5 y posteriores .

Se menciona en los docs : "Si no se proporciona una propiedad, (por ejemplo, ''+''), el elemento de la matriz se usa para comparar dónde se clasifica". Entonces, la solución será:

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

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

Esta solución parece ser mejor porque no modifica una matriz y no requiere recursos computacionales adicionales (al menos en nuestro código). He leído todas las respuestas existentes y sigo prefiriendo esta a ellas.

Answer 8

Puede revertir por el parámetro $ index

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

Answer 9

Puede simplemente llamar a un método en su alcance para revertirlo, así:

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

Tenga en cuenta que $scope.reverse crea una copia de la matriz, ya que Array.prototype.reverse modifica la matriz original.

Answer 10

Si está usando 1.3.x, puede usar lo siguiente

{{ orderBy_expression | orderBy : expression : reverse}}

Ejemplo Lista de libros por fecha publicada en orden descendente

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

fuente: docs

Answer 11

Si está utilizando la versión 1.4.4 y superior de angularjs, una forma fácil de ordenar es usando el " índice $ ".

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

ver demostración

Answer 12

Solución simple: - (no hay necesidad de hacer ningún método)

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

Answer 13

También puedes usar .reverse (). Es una función de matriz nativa

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

Answer 14

Yo mismo me había frustrado con este problema y, por lo tanto, modifiqué el filtro creado por @Trevor Senior, ya que estaba teniendo problemas con mi consola y decía que no podía usar el método inverso. También quise mantener la integridad del objeto porque esto es lo que Angular está utilizando originalmente en una directiva de repetición ng. En este caso, utilicé la entrada de estupido (clave) porque la consola se enfadará diciendo que hay duplicados y, en mi caso, necesitaba rastrear por $ índice.

Filtrar:

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

Answer 15

Yo sugeriría que usar el método inverso de matriz nativa es siempre una mejor opción que crear un filtro o usar $index .

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

Plnkr_demo .

Answer 16

Yo sugeriría usar un filtro personalizado como este:

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

Que luego se puede utilizar como:

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

Véalo trabajando aquí: Demostración de Plunker

Este filtro puede personalizarse para adaptarse a sus necesidades como mejor se vea. He proporcionado otros ejemplos en la demostración. Algunas opciones incluyen verificar que la variable sea una matriz antes de realizar el reverso, o hacer que sea más indulgente para permitir la reversión de más cosas, como cadenas.

Answer 17

Consejo útil:

Puedes invertir tu matriz con J vainilla: yourarray .reverse ()

Precaución: la inversión es destructiva, por lo que cambiará su matriz, no solo la variable.