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 :) 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? 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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