"Next" and "return" button in something similar to a form with Angularjs

Question

"Next" and "return" button in something similar to a form with Angularjs

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

Good morning. I need to know how I can use the "next" and "return" buttons on something similar to a form with html using angular js. Said "form" will be more like an online test, in which the user will click on "next" and "return" as he advances. My problem is that I do not know which angularjs directive to use, and the ones I have used have not worked for me so far.

My code that I have so far is this:

    <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>

More or less what I'm looking for is that an angle directive allows me to show certain content when I indicate by pressing the "return and next" button. More specifically I would like to enclose a "div" said parts and then display them with an angularjs directive although I do not know how. Thanks for the help.

html angularjs angular-directivas

asked by Grecia V. P. Valero 18.02.2017 в 18:19

source

2 answers

0

What you're trying to build is a Wizard type navigation pattern.

You should explore libraries that provide that functionality, you can review projects on Github as:

link

or

link

The library to choose depends on the Angular version you are using in your project. If you decide to continue writing your own, keep an eye on how they are made, it would be helpful.

answered by 18.02.2017 в 22:22

Fill an array of Javascript with the result of a SQL Server stored procedure Error JSF, I created my project in eclipse and I get this error

score 2 · Accepted Answer

You can use ngshow. The idea would be to have several div as pages and use ngshow to display them based on some variable that tells you what page you are on. P.E: for the first div ng-show="page == 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>

I hope it serves you.