Una parte clave de las aplicaciones web es la muestra de listados, esto siempre será importante siempre que trabajamos con bases de datos, ya que tenemos que mostrar elementos almacenados, así como por ejemplo si realizamos una tienda en línea hay que mostrar un listado de productos.
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.
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:
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:
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:
Ahora simplemente debemos llamar a la nueva función en nuestro HTML, lo podemos hacer de la siguiente forma:
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.
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:
Función splice()
Otra de las cosas que podemos hacer es incorporar nuevos elementos en la lista, para ello tenemos la función splice(), si la incorporamos por ejemplo en un botón que agregue nuevos estudiantes, automáticamente veremos el cambio, esto gracias a que AngularJS nos da ese toque de refrescamiento en tiempo real del documento sin necesidad de recargar la página.
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.
