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.

var app = angular.module("app", []);
 
app.controller("PruebaController", function($scope) {
  $scope.provincias=[
    {
      idProvincia:2,
      nombre:"Castellón"
    },
    {
      idProvincia:3,
      nombre:"Alicante"
    },
    {
      idProvincia:1,
      nombre:"Valencia"
    },
    {
      idProvincia:7,
      nombre:"Teruel"
    },  
    {
      idProvincia:5,
      nombre:"Tarragona"
    },      
  ];
});

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

  <table>
    <thead>
      <tr>
        <th>IdProvincia</th>
        <th>Nombre</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="provincia in provincias">
        <td>{{provincia.idProvincia}}</td>
        <td>{{provincia.nombre}}</td>
      </tr>
    </tbody>
  </table>

• 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:

<tr ng-repeat="provincia in provincias" style="background-color:{{$even?'white':'yellow'}}">

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:

  <table>
    <thead>
      <tr>
        <th>IdProvincia</th>
        <th>Nombre</th>
        <th>Nº fila</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="provincia in provincias" style="background-color:{{$even?'white':'yellow'}}">
        <td>{{provincia.idProvincia}}</td>
        <td>{{provincia.nombre}}</td>
        <td>{{$index}}</td>
      </tr>
    </tbody>
  </table>