Lo que debemos entender que a pesar que los registros son diferentes, los elementos como tal son repetidos, ya que probablemente sean filas de una tabla o una lista ordenada, sea como sea la diferencia de contenido no representa una diferencia de estructura.
Listas, Tablas y Otros Elementos Repetidos
AngularJS no nos complica la vida, simplemente si queremos utilizar o hacer una lista debemos emplear ng-repeat que nos crea un elemento por cada elemento contenido en una lista, con ello podemos pasar una lista de productos y fácilmente generar una tabla.
Digamos que estamos realizando un listado de estudiantes para un colegio, la clave es generar la lista, normalmente la obtendríamos de algún servicio web que consulte a una base de datos pero para simplificar haremos una lista nosotros, luego llamamos a esta lista dentro de nuestro $scope para poder utilizarla, con ello dentro del HTML podemos incorporar la instrucción ng-repeat que habíamos mencionado, veamos el siguiente código:
var estudiantes = [{nombre:'María Rojo', id:'1'}, {nombre:'Manolo Rodriguez', id:'2'}, {nombre:'Joao Pinto', id:'3'}]; function EstudianteListController($scope) { $scope.estudiantes = estudiantes; }
Aquí hemos definido la lista de los estudiantes y luego definimos el controlador con el cual pasamos dicha lista al $scope del controlador, ahora debemos escribir el código HTML:
<ul ng-controller='EstudianteListController'> <li ng-repeat='estudiante in estudiantes'> <a href='/estudiante/vista/{{estudiante.id}}'>{{estudiante.nombre}}</a> </li> </ul>
Aquí vemos que definimos nuestra lista como un controlador de AngularJS y con ello el $scope de dicho controlador nos permite acceder al listado de estudiantes, luego utilizamos ng-repeat diciéndole que va a crear un estudiante por cada elemento de la lista estudiantes y finalmente dentro del <li> creamos un ancla que nos lleva a otro lugar dentro de la aplicación. Veamos la siguiente imagen de como luce esto en nuestro navegador:
Veamos en el siguiente código como quedaría el controlador para que agregue un estudiante:
var estudiantes = [{nombre:'María Rojo', id:'1'}, {nombre:'Manolo Rodriguez', id:'2'}, {nombre:'Joao Pinto', id:'3'}]; function EstudianteListController($scope) { $scope.estudiantes = estudiantes; $scope.agregarNuevo = function () { $scope.estudiantes.splice(1, 0, {nombre:'Joaquin Fernandez', id:'4'}); }; }
Ahora simplemente debemos llamar a la nueva función en nuestro HTML, lo podemos hacer de la siguiente forma:
<div ng-controller='EstudianteListController'> <ul> <li ng-repeat='estudiante in estudiantes'> <a href='/estudiante/vista/{{estudiante.id}}'>{{estudiante.nombre}}</a> </li> </ul> <button ng-click="agregarNuevo()">Insertar</button> </div>
Veamos cómo nos queda esto en nuestro navegador:
Vemos como hemos añadido el nuevo estudiante a la lista, sin embargo cada vez que hacemos click sobre el botón añadimos a la misma persona, esto es porque no hemos hecho un código dinámico, pero ya eso es otro asunto, lo que si debemos destacar es que tuvimos que agregar un <div> al cual le colocamos el controlador, de esta forma pudimos incorporar nuestro botón en el $scope.
Con esto finalizamos este tutorial, como vemos el manejo de elementos repetidos en AngularJS es bastante sencillo y nos da la posibilidad de crear listas rápidamente como pudimos constatar en los ejemplos.