Iteración ng-repetir solo X veces en AngularJs

86

¿Cómo puedo usar ng-repeat como para en Javascript?

ejemplo:

<div ng-repeat="4">Text</div>

Quiero iterar con ng-repeat 4 veces, pero ¿cómo puedo hacerlo?

Vural
fuente
3
Ambos son posibles: las directivas tienen nombres en mayúsculas, como ngBind. La directiva se puede invocar traduciendo el nombre del caso camel en el caso de la serpiente con estos caracteres especiales:, - o _. Opcionalmente, la directiva puede tener el prefijo x- o data- para que sea compatible con el validador HTML.
asgoth
2
wow ¿cómo es que tantas respuestas incorrectas, se debe utilizar ng repetición = "artículo disponible artículos | LimitTo: 4"
Toolkit
Existe la posibilidad de que no tenga ninguna matriz para iterar. Digamos, para mostrar las estrellas en una clasificación de estrellas. Puede haber un campo para la cantidad de estrellas que necesita mostrar, pero esto no es iterable.
nirazul
@Toolkit ... ¿y qué es items...?
TJ
@TJ stackoverflow.com/a/17736076/631527
Kit de herramientas

Respuestas:

342

Angular viene con un filtro limitTo: limit, admite la limitación de los primeros x elementos y los últimos x elementos:

<div ng-repeat="item in items|limitTo:4">{{item}}</div>
David Lin
fuente
14
Esta debería ser la respuesta, ya que también funciona con la iteración de objetos en una matriz. Además, es una función angular.
Ashley Coolman
29
Esta es una pieza de código increíblemente útil, pero en realidad no satisface la pregunta del OP. Simplemente está buscando una forma de repetir n veces, y probablemente no tenga un objeto real sobre el que iterar.
SamHuckaby
2
esta debería ser la respuesta, utiliza las herramientas proporcionadas por el núcleo de AngularJS
Udo
10
En realidad, esto no resuelve el problema. Asumes que tiene un objeto llamadoitems
Batman
1
De hecho, no es una respuesta útil para la pregunta (busqué en Google específicamente cómo iterar X veces, y no limitar X), pero no obstante, un fragmento de código útil.
MacK
65

Esta es la solución más simple que se me ocurrió.

<span ng-repeat="n in [].constructor(5) track by $index">
{{$index}}
</span>

Aquí hay un ejemplo de Plunker.

ChandrasekarG
fuente
2
Inteligente y muy útil sin usar ninguna función en el controlador sentado. Todavía desconcertado por qué esto no es una característica angular
MacK
1
Esta debería ser la respuesta . OP pidió "usar ng-repeat like for". Esto implica tener toda la implementación directamente en la vista, sin ninguna "ayuda" del controlador. Esta solución hace exactamente eso ... y es muy inteligente para arrancar.
karfus
Agradable, pero no funciona en todas las versiones angulares. Estoy usando 1.2.9 y no es compatible:Error: [$parse:isecfld]
Emaborsa
50

Puede usar el método de corte en el objeto de matriz de JavaScript

<div ng-repeat="item in items.slice(0, 4)">{{item}}</div>

Corto y dulce

Gihan
fuente
2
¿Por qué está mal ?. Funciona. Tomemos otro escenario, si desea elementos de matriz de 2 a 4 de índices de matriz. ¿Funciona con limitTo filter?
Gihan
4
No está mal, simplemente no es tan fácil comoitem in items|limitTo:4
CENT1PEDE
1
Esto agrega la funcionalidad de que podría mostrar los elementos 1-4, luego hacer clic en un botón para cambiar .slice (0,4) a .slice (5,8), lo que permite un paginador simple. ¡Gracias!
BaneStar007
39

en el html:

<div ng-repeat="t in getTimes(4)">text</div>

y en el controlador:

$scope.getTimes=function(n){
     return new Array(n);
};

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

EDITAR:

con angularjs> 1.2.x

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>
mpm
fuente
19
otras opciones: t in [1,2,3,4]o t in 'aaaa' etc :)
Valentyn Shybanov
4
Parece extraño que Angular no pueda admitir un bucle matemático sin requerir una función que lo respalde.
Guido Anselmi
4
Sí, puedo imaginar tener que iterar 30x, escribirlo como [1,2,3,4]... Qué solución tan pésima esta
Matej
2
Vea a continuación la respuesta de DavidLin para una mejor solución.
SamHuckaby
@SamHuckaby, el problema es iterar sobre un range.limitTo es inútil en ese caso. No se trata de iterar sobre un conjunto de valores que significan algo por sí mismos, es iterar 4 veces, por ejemplo, no 4 veces sobre una porción de una matriz existente, solo 4 veces. al igual que en coffeescript cuando creas un segmento ad hoc, como "[0..4]", realmente no te preocupan los valores reales, solo que repetirás una operación 4 veces.
mpm
13

La respuesta dada por @mpm no funciona, da el error

No se permiten duplicados en un repetidor. Utilice la expresión 'rastrear por' para especificar claves únicas. Repetidor: {0}, clave duplicada: {1}

Para evitar esto junto con

ng-repeat = "t en getTimes (4)"

utilizar

seguimiento por $ index

Me gusta esto

<div ng-repeat = "t en getTimes (4) seguimiento por $ index"> TEXTO </div>

Pratik Goenka
fuente
mi técnica funcionó con la versión de angularjs que utilicé. Solo revisa el plunkr, lo actualizaré lo antes posible.
mpm
10

Para repetir 7 veces, tratar de utilizar un una matriz con longitud = 7 , a continuación, realizar un seguimiento de que por $ índice :

<span ng-repeat="a in (((b=[]).length=7)&&b) track by $index" ng-bind="$index + 1 + ', '"></span>

b=[]cree un Array «b» vacío,
.length=7establezca su tamaño en «7»,
&&bdeje que el nuevo Array «b» esté disponible para ng-repeat,
track by $indexdonde «$ index» es la posición de iteración.
ng-bind="$index + 1"pantalla a partir de 1.

Para repetir X tiempos:
basta con sustituir el 7 por X .

funnyniko
fuente
No está claro qué proporciona esta respuesta que no esté ya cubierto por la respuesta aceptada, o las dos votaciones más altas.
JamesT
Nada más que lo poderoso que puede ser Angular.
funnyniko
3
Las respuestas con dos votos más altos parecen asumir que «elementos» es una matriz. Éste hace que la matriz esté en su lugar.
funnyniko
Bien hecho, funciona. Esta es la única solución que realmente aborda la pregunta del OP. Es sorprendente que solo tenga unos pocos votos. Me pregunto si existe una solución más elegante.
Healforgreen
3

Todas las respuestas aquí parecen asumir que los elementos son una matriz. Sin embargo, en AngularJS, también podría ser un objeto. En ese caso, no funcionará el filtrado con limitTo ni array.slice. Como una posible solución, puede convertir su objeto en una matriz, si no le importa perder las claves del objeto. Aquí hay un ejemplo de un filtro para hacer precisamente eso:

myFilter.filter('obj2arr', function() {
    return function(obj) {
        if (typeof obj === 'object') {
            var arr = [], i = 0, key;
            for( key in obj ) {
                arr[i] = obj[key];
                i++;
            }
            return arr;
        }
        else {
            return obj;
        }

    };
});

Una vez que sea una matriz, use slice o limitTo, como se indica en otras respuestas.

Per Quested Aronsson
fuente