Angular ng-repeat y sus opciones

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:

	<html>
	<head>
	<script src="angular.min.js"></script>

	<script>
	var miapp = angular.module('miapp',[]).controller("micontrolador",function($scope) {

	$scope.personas=[{nombre:"pepe",edad:20},
	{nombre:"angel",edad:30},{nombre:"maria",edad:35},{nombre:"gema",edad:25}];


	});

	</script>
	</head>
	<body ng-app="miapp">
	<div ng-controller="micontrolador">

	<table>
	<tr ng-repeat="persona in personas">
	<td> {{persona.nombre}}</td>
	<td>{{persona.edad}}</td>
	</tr>

	</table>

	</div>
	</body>
	</html>

view raw gistfile1.txt hosted with ❤ by GitHub

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.

	<table>
	<tr ng-repeat="persona in personas">
	<td>{{$index+1}}</td>
	<td> {{persona.nombre}}</td>
	<td>{{persona.edad}}</td>
	</tr>

	</table>

view raw gistfile1.txt hosted with ❤ by GitHub

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.

	<tr ng-repeat="persona in personas">
	<td ng-if="$odd">impar</td>
	<td ng-if="$even">par</td>
	<td>{{persona.nombre}}</td>
	<td>{{persona.edad}}</td>
	</tr>

view raw gistfile1.txt hosted with ❤ by GitHub

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).

	<tr ng-repeat="persona in personas">
	<td ng-if="$first">primero</td>
	<td ng-if="$middle">medio</td>
	<td ng-if="$last">ultimo</td>
	<td>{{persona.nombre}}</td>
	<td>{{persona.edad}}</td>
	</tr>

view raw gistfile1.txt hosted with ❤ by GitHub

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.

	<tr ng-repeat-start="persona in personas">
	<td ng-if="$first">primero</td>
	<td ng-if="$middle">medio</td>
	<td ng-if="$last">ultimo</td>
	<td>{{persona.nombre}}</td>
	<td>{{persona.edad}}</td>
	</tr>
	<tr ng-repeat-end>
	<td colspan="3">
	<hr/>
	</td>
	</tr>

view raw gistfile1.txt hosted with ❤ by GitHub

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.

	<tr ng-repeat-start="persona in personas ">
	<td ng-if="$first">primero</td>
	<td ng-if="$middle">medio</td>
	<td ng-if="$last">ultimo</td>
	<td>{{persona.nombre}}</td>
	<td>{{persona.edad}}</td>
	<td><input type="button" ng-click="consola(persona)"/>
	</tr>

view raw gistfile1.txt hosted with ❤ by GitHub

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.

	<table>
	<tr ng-repeat="persona in personas track by persona.nombre ">
	<td ng-if="$first">primero</td>
	<td ng-if="$middle">medio</td>
	<td ng-if="$last">ultimo</td>
	<td>{{persona.nombre}}</td>
	<td>{{persona.edad}}</td>
	</tr>

	</table>