menú
¿Música de YouTube sin molestos comerciales? ¡Ahora es posible!
TubeFiesta es una aplicación que te permite reproducir música de YouTube como un reproductor tradicional.
Crear listas, reproducción aleatoria, repetir, y hasta exportar el video a otra pantalla.
Conocer más Ir a tfiesta.com

Crear un Wizard con AngularJS

Publicado el 08/09/2014 | 1507 visitas

Hola de nuevo, alguna vez has tenido que diligenciar un formulario con muchos campos?, o diseñar un formulario con mucho contenido y poco espacio para hacerlo?.
Hace poco debía recoger información del usuario donde mostraba algunos campos de texto, algunas listas, un mapa y el espacio no me daba para mostrar de una forma usable tanta información, tampoco podía separarlos en páginas diferentes así que decidí crear una especie de Wizard apoyandome con Angular JS y resultó de maravilla. Hoy quiero compartir mi experiencia.

wizard con angular js

Vamos paso a paso... Lo primero será armar nuestro "coco" html y angular. Para esto importamos la librería base de AngularJS como un script.

Luego dentro de un div tendremos nuestro ng-app y dentro de otro nuestro controlador.

No sabes que es ng-app ni ng-controller?, Entonces échale un ojo al tutorial oficial para entender los conceptos.

Cada una de las "presentaciones" o secciones del Wizard será un list-item dentro de una lista. (funciona perfectamente con otros elementos HTML).

En la primera daremos una bienvenida, luego vamos a recoger dos campos y finalmente daremos un consolidado de la información recopilada para almacenarla, algo así como una confirmación antes de guardar.

Ahora, vamos a hacer que solo se muestre un elemento de la lista a la vez, para esto crearemos una variable en el contexto de angular llamada current la cual almacenará la posición (basada en cero) de la pantalla que deseamos mostrar.

También para cada list-item añadiremos un ng-show que controla cuando el elemento es mostrado, así: ng-show="(current == 0)". Esto hará que el elemento solo se muestre cuando la variable current tenga el valor cero. Así sucesivamente vamos a hacer con cada uno de los list-item.

Si observamos el resultado anterior, notaremos que ya solo se muestra el primer list-item ya que hemos inicializado la variable current con el valor cero.

Ahora, para navegar entre cada una de las vistas (o list-item) agregaremos botones de "atrás" y "adelante". Y en cada uno implementamos el evento ng-click estableciendo la variable current con el valor de la posición a donde queremos que nos lleve cada botón. Angular hará su magia.

Ahora que ya tenemos navegación podemos incluir un poco de lógica. A cada caja de texto le indicaremos el modelo que va a utilizar con ng-model, en el consolidado (indice 2) vamos a "bindear" cada uno de esos valores, finalmente los mostraremos en un mensaje al hacer clic en guardar. Veamos...

Ahí lo tienes, deja un comentario si te sientes agradecido o si tienes alguna duda. También recuerda compartir ; )

Talvez te interese...

[Truco] Contar caracteres en Google Chrome
Flashes de cámara con JQuery
Lluvia de colores con JQuery
Cómo optimizar las validaciones de tus formularios
blog comments powered by Disqus