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.
Vamos a utilizar la propiedad $index para mostrar la posición de cada item dentro de la colección.
El resultado será :
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 :
Otra opción soportada es identificar el primer elemento ($first) , el último ($last) y el resto de los elementos ($middle).
Cada item queda identificado:
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.
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:
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
