0

Necesito saber como puedo usar los botones "siguiente" y "regresar" en algo parecido a un formulario con html usando angular js. Dicho "formulario" sera más bien como una prueba de en linea, en el cual el usuario dará click en "siguiente" y "regresar" a medida que avance. Mi problema es que no sé cual directiva de angularjs usar, y las que he usado no me han funcionado hasta ahora.

Mi codigo que tengo hasta ahora es el siguiente:

    <html ng-app>
    <head>
          <title></title>
    <script  src="js/angular.min.js"></script> <!--Declarando Angular-->
    <script src="js/app.js"></script>

    <link rel="stylesheet" href="css/bootstrap.min.css"> <!--Declarando Bootstrap-->
    <link rel="stylesheet" href="css/style.css"> <!--Declarando estilo css-->
    <br><br><br>

    </head>
    <body>

    <!--Parte1, Datos generales-->
    <center><h2 style="color:#467FE2">Datos Generales</h2></center>

    <b style="color:#FF0000">*Campos obligatorios</b><br><br>

    <b>Nombre <b style="color:#FF0000">*</b></b></h5> <input ng-model="nombre" required><br><br>
    <b>Apellido <b style="color:#FF0000">*</b></b></h5> <input ng-model="nombre" required><br><br>
    <b>Cédula de identidad <b style="color:#FF0000">*</b></b></h5> <input ng-model="nombre" required><br><br>
    <br><br>
    <input type="siguiente" class="btn btn-primary btn-md" value="Siguiente" class="next-step" ng-model="checked" >



    <!--Parte2, Completación-->
    <center><h2 style="color:#467FE2"> Prueba en Línea </h2></center><br><br>

    Parte 1: Completación<br><br>

    1.- ________________ Es una secuencia de pasos lógicos para la solución de un
    problema escrita en lenguaje natural.<br><br>
    Valor: 2 puntos

    2.- ________ Son difíciles de aprender y manejar ya que no resultan cercanos al ser
    humano.<br><br>
    Valor: 2 puntos
    <br><br>
    <input type="siguiente" class="btn btn-primary btn-md" value="Regresar">
    <input type="siguiente" class="btn btn-primary btn-md" value="Siguiente">

<!--Luego vendria la parte3, parte4, parte 5, y asi sucesivamente hasta llegar al final de la prueba -->

</body>
</html>

Más o menos lo que busco es que una directiva de AngularJS (Angular 1) me permita que cierto contenido se muestre cuando le indique presionando el boton "regresar y siguiente". Más especificamente me gustaría encerrar un "div" dichas partes y luego mostrarlas con una directiva de angularjs aunque no se como. Gracias por la ayuda.

2 respuestas 2

2

Puedes usar ngshow. La idea sería tener varios div a modo de paginas y usar ngshow para mostrarlos en función de alguna variable que te indique e que página estás. P.E: para el primero div ng-show="página==1"

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.pagina = 1;
  $scope.siguiente = function() {
    $scope.pagina++;
  }
  $scope.anterior = function() {
    $scope.pagina--;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-show="pagina==1">
    <div>pagina 1</div>
    <button ng-click="siguiente()">Siguiente</button>
  </div>
  <div ng-show="pagina==2">
    <div>pagina 2</div>
    <button ng-click="anterior()">Anterior</button>
    <button ng-click="siguiente()">Siguiente</button>
  </div>
  <div ng-show="pagina==3">
    <div>pagina 3</div>
    <button ng-click="anterior()">Anterior</button>
    <button ng-click="siguiente()">Siguiente</button>
  </div>
  <div ng-show="pagina==4">
    <div>pagina 4</div>
    <button ng-click="anterior()">Anterior</button>
  </div>
</div>

Espero que te sirva.

2
  • Gracias, me ha ayudado la respuesta a solucionar mi problema :) Commented el 19 feb. 2017 a las 19:51
  • no se pierden los datos cuando el usuario está por ejemplo en el paso 3 y recarga la página? Commented el 26 feb. 2018 a las 17:20
0

Lo que estás tratando de construir es un patrón de navegación tipo Wizard.

Deberías explorar librerías que provean esa funcionalidad, puedes revisar proyectos en Github como:

https://github.com/DaveWM/ngWizard

o

https://github.com/angular-wizard/angular-wizard

La librería a elegir depende de la versión de AngularJS (Angular 1) que estés usando en tu proyecto. Si te decides continuar escribiendo la tuya propia echar un ojo a cómo están hechas estas sería de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.