Este código es mucho mas simple que el anterior, En la parte del script solo tenemos que crear un nuevo controlador y declarar la variable pagina dentro del $scope con el valor de la primer página que se quiere mostrar, en este caso yo le puse que muestre la número 1.
Codigo AngularJS
function MyController($scope) {
$scope.pagina = 1;
}
Y el siguiente es el código HTML, como podemos ver es el mismo form con 4 div en su interior. Solo que ahora se han eliminado todas las clases, ya que no vamos a utilizarlas.
En el DIV que contiene al FORM se agregó el atributo ng-app para indicar a AngularJS que tiene que trabajar en ese ámbito.
Luego se agregó el atributo ng-controller='MyController' para definir el controlador que trabajara con el elemento y sus hijos.
En cada una de los DIV que contienen las páginas se agrego el atributo ng-show que lo que hace es mostrar el elemento siempre que la expresión evaluada sea TRUE, en este caso, cuando la variable pagina sea igual al numero de página.
Y para finalizar se agregó a cada botón el atributo ng-click que hace que cada vez que se presione el botón aumente o disminuya el valor de la variable pagina en 1 según sea el caso. Como se puede ver nos quedo un código mucho mas corto y entendible que con JQuery
Codigo HTML
<body> <div ng-app> <form ng-controller='MyController'> <div ng-show="pagina==1" > <h2>Datos de la Persona</h2> <label>Nombre</label> <input type="text" name="nombre" > <label>Apellido</label> <input type="text" name="apellido" > <br> <input type="button" value="Ant" disabled> <input type="button" value="Sig" ng-click="pagina=pagina+1" > </div> <div ng-show="pagina==2" > <h2>Direccion</h2> <label>Provincia</label> <input type="text" name="provincia" > <label>Domicilio</label> <input type="text" name="domicilio" > <br> <input type="button" value="Ant" ng-click="pagina=pagina-1" > <input type="button" value="Sig" ng-click="pagina=pagina+1" > </div> <div ng-show="pagina==3" > <h2>Empresa</h2> <label>Nombre</label> <input type="text" name="nombreEmpresa" > <label>Telefono</label> <input type="text" name="telefonoEmpresa" > <br> <input type="button" value="Ant" ng-click="pagina=pagina-1" > <input type="button" value="Sig" ng-click="pagina=pagina+1" > </div> <div ng-show="pagina==4" > <h2>Contacto</h2> <label>eMail</label> <input type="text" name="email" > <label>Telefono</label> <input type="text" name="telefono" > <br> <input type="button" value="Ant" ng-click="pagina=pagina-1" > <input type="button" value="Sig" disabled> </div> </form> </div> </body>
Bien, lo que nos queda, es lo siguiente, como podemos ver la funcionalidad es la misma.
No hay comentarios.:
Publicar un comentario