Cargando

Ir a contenido


 


AngularJS - Manejo de Elementos Repetidos

En este tutorial veremos cómo manejar los elementos repetidos en AngularJS.


Escrito por el jul 25 2014 17:45 angularjs


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.

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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jul 25 2014 17:45
  •   Actualizado jul 29 2014 12:10
  •   Visitas 2.2K
  •   Nivel
    Avanzado



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse