<div ng-app> <div ng-controller="wizardController"> <ul id="wizard"> <li ng-show="(current == 0)"> <h2>Bienvenido</h2> <p>Este es un mensaje de bienvenida</p> <div> <button ng-click="current=1">Siguiente</button> </div> </li> <li ng-show="(current == 1)"> <h2>Ingresa el valor 1</h2> <label>Ingrese el valor 1</label> <input type="text" ng-model="campo1"/> <div> <button ng-click="current=2">Siguiente</button> </div> </li> <li ng-show="(current == 2)"> <h2>Ingresa el valor 2</h2> <label>Ingrese el valor 2</label> <input type="text" ng-model="campo2"/> <div> <button ng-click="current=3">Siguiente</button> </div> </li> <li ng-show="(current == 3)"> <h2>Guardar</h2> <p>Ha completado el formulario.</p> <p>Campo 1 es: {{campo1}}</p> <p>Campo 2 es: {{campo2}}</p> <div> <button ng-click="guardar()">Guardar</button> </div> </li> </ul> </div> </div>
var wizardController = function($scope) { $scope.current = 0; //inicia en el primer indice $scope.guardar = function(){ alert('guardado '+$scope.campo1+' y '+$scope.campo2); } }
#wizard { list-style:none; } #wizard li { display:block; }