Angular ng-repeat y sus opciones

Angular ng-repeat y sus opciones
Sin comentarios Facebook Twitter Flipboard E-mail

Cuando trabajamos con Angular.js una de las directivas que más utilizamos es ng-repeat. Esta directiva permite presentar en una vista una colección de elementos soportando parametrizaciones diferentes. Vamos a ir viendo las diferentes opciones. Para ello partiremos de este bloque de código:

Como podemos observar se ha creado una colección de personas y se ha utilizado la directiva ng-repeat para generar una tabla.

Ngrepeatgrande

Vamos a utilizar la propiedad $index para mostrar la posición de cada item dentro de la colección.

El resultado será :

Posiciongrande

De similar forma a la posición de cada item podemos identificar los elementos pares e impares a través de las propiedades $odd y $even.

Las filas quedarán marcadas :

Posiciongrande2

Otra opción soportada es identificar el primer elemento ($first) , el último ($last) y el resto de los elementos ($middle).

Cada item queda identificado:

Ngprimerogrande

En algunas ocasiones no es suficiente con utilizar ng-repeat y la estructura necesita una mayor flexibilidad. En estos casos podemos utilizar las directivas ng-repeat-start y ng-repeat-end para aplicar un formato más personalizado.

En este caso cada vez que se imprime una fila de la tabla se añade una fila adicional que sirve de separación.

Ngrepeatstartgrande

Por último generamos un botón en cada una de las filas que se encargue de imprimir el objeto por la consola.

Para ello crearemos una nueva función en nuestro $scope y añadiremos el servicio de $log como dependencia:

 $scope.consola=function(persona) {

            $log.log(persona);

        }

Esta función se encarga de imprimir en la consola el objeto de cada fila, para sorpresa de muchos el resultado incluye un hashkey:

Ngconsole

Este hashkey es creado por Angular.js para llevar un control de las modificaciones que se realizan a cada objeto e identifica cada uno de forma única. El problema es que en muchas ocasiones nosotros queremos que estos objetos se identifiquen a través de una clave primaria que asignamos. Podemos obligar a Angular.js a usar nuestra clave utilizando la sentencia track by en la directiva ng-repeat, esto eliminará los hashkeys.

En Genbeta Dev | Introducción a Angular.js

Comentarios cerrados
Inicio