4.4 ng-repeat

Esta directiva es una de las más útiles de AngularJS y permite repetir una serie de tag HTML en función de un array ¹⁾ de datos de $scope. Su utilidad es para hacer tablas o similar, es decir para estructuras que se repiten.

Veamos un ejemplo para explicar su funcionamiento.

• Linea 4: La propiedad provincias del $scope es un array de objetos.

• Linea 9: La directiva ng-repeat hará que se repita el tag en la que se encuentra junto a su contenido. En nuestro caso es el tag <tr> y los dos tag <td>. Se repetirá tantas veces como elementos haya en el array. En nuestro caso el array es provincias. Además se ha creado una nueva variable llamada provincia que contiene cada uno de los elementos de array.
• Línea 10: Para acceder a cada uno de los elementos del array y mostrar sus datos usamos la nueva variable provincia ya que si no lo hacemos seguiremos accediendo a las propiedades del $scope. Es este caso accedemos a cada una de las propiedades de idProvincia mediante provincia.idProvincia.
• Línea 11: Lo mismo que en el caso anterior pero ahora mostrando el nombre mediante provincia.nombre.

Hemos visto que dentro del bucle de ng-repeat se crea una nueva variable definida por nosotros llamada provincia. AngularJS también crea otra serie se variables que podemos usar:

• $index: Un número que indica el nº de elementos(de 0 a n-1).
• $first : Vale true si estamos en el primer elemento del bucle.
• $last : Vale true si estamos en el último elemento del bucle.
• $middle : Vale true si no estamos ni en el primer ni en el último elemento del bucle.
• $even : Vale true si estamos en un elemento con $index par. (El 0 es par).
• $odd : Vale true si estamos en un elemento con $index impar. (El 0 es par).

Todas estas variable son muy útiles para cambiar el estilo de la filas.

Podemos modificar el ejemplo anterior de forma que las filas pares sena de fondo blanco y la impares de fondo amarillo:

Se ha usado el operador ternario de javaScript para que cuando la variable $even sea true se retornará “white” y cuando sea false se retornará yellow.

Tambien podemos modificar el ejemplo haciendo que se muestre el Nº de fila en la que estamos:

Aquí hemos añadido una tercera columna para mostrar la variable $index.

ng-repeat solo permite repetir un único tag HTML y su contenido, pero ¿como hacemos para repetir varios tags? Antes había que meterlo todo dentro de un tag <div> y repetir el tag <div> pero ahora se permite la siguiente estructura:

Así se repetirían el tag <strong> , el texto y el tag <br> tantas veces como elementos hay en el array.

Para delimitar el tag de inicio de la repetición se usa la directiva ng-repeat-start que funciona exactamente igual que ng-repeat y para delimitar el tag de fin de la repetición de usa la directiva ng-repeat-end

• ng-repeat

La directiva ng-repeat tiene mas funcionalidades que no veremos aqui , aunque vamos a indicar dos de ellas que encuentro importantes:

• repetir varias etiquetas
• optimizacion