Angularjs hide and show answer form

Question

Angularjs hide and show answer form

Navigation

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

2

I have a form to complete and calculate a loan.

I see the form and a Send button. When I fill in the form and I give the Send button I want the result to be shown to me.

I'm working with Angularjs . I do not know how to use ng-hide or ng-show .

The hidden form of the result of the calculation of the quota I have it, but I do not know how to show it by clicking the send button.

This is my Html code:

<div class="jumbotron" background-color="#FFF8DC">
    <div style="position:center ; color: #1D66EE">
        <h1>//ABANCA</h1>
    </div>

    <p class="lead">
        Préstamos en 24H.
        Haz tus cuentas.
    </p>

</div>
<body ng-app="pruebaApp">
    <div class="row">
        <div class="col-md-6">

            <form action="http://localhost:58498/api/Cuota" class="form-horizontal"
                  method="get" role="form" id="formulario-cuotas">
                    <div class="form-group">
                        <label class="control-label" for="Cuotas">¿Cuánto quieres pedir?</label>
                        <input class="form-control" data-val="true"
                               data-val-cuotas="El campo de las Cuotas está vacío. No es válido"
                               data-val-required="El campo Cuotas es obligatorio." id="Cuotas"
                               name="cantidad" type="number" value="">
                        <span class="field-validation-valid text--danger"
                              data-valmsg-for="Cuotas" data-valmsg-replace="true"></span>
                    </div>

                <p>
                    "Con el préstamo 24h puedes pedir a partir <br>
                    de 500€, pero para cantidades de hasta 3000€ <br>
                    tiene que ser en la "<a href="/es/tarjetas/tarjetas-credito/tarjeta-visa-clip" target="_blank">
                        modalidad de
                        tarjeta <br>
                    </a>
                    ".Por eso este simulador empieza en 3000€ que <br>
                    es lo mínimo que puedes pedir en la modalidad <br>
                    de préstamo. Ten en cuenta que no puedes <br>
                    solicitar más de lo que cuesta lo que vayas <br>
                    financiar."
                </p>


                <br>

                    <div class="form-group">
                        <label for="Plazo" class="control-label">¿Cuándo deseas devolverlo?</label>
                        <input class="form-control" data-val="true"
                               data-val-cuotas="El campo de los plazos está vacío. No es válido"
                               data-val-required="El campo Plazos es obligatorio." id="Plazos"
                               name="plazos" type="text" value="">
                        <span class="field-validation-valid text--danger"
                              data-valmsg-for="Plazos" data-valmsg-replace="true"></span>
                    </div>

                <p>
                    "Puedes devolverlo en un plazo maximo de 96 meses,<br>
                    osea, 8 años"
                </p>

                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" name="tipo" id="optionsRadios1" value="hipotecario" checked=""><font>
                            <font class="">
                                Crédito Hipotecario.
                            </font>
                        </font>
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" name="tipo" id="optionsRadios2" value="personal" checked=""><font>
                            <font class="">
                                Crédito Personal.
                            </font>
                        </font>
                    </label>
                </div>

                <br>
                <br>


            </form>

            <button id="btnenviar" name="btnenviar" class="btn btn-primary input-group">
                    ENVIAR
                </button>
            <br>

            <div ng-app="pruebaApp" ng-controller="pruebaAppCtrl"></div>
                <button name="btnEnviar" class="btn btn-primary" ng-class="color" ng-click="enviar()">
                    NG-ENVIAR
                </button>



                @*<div ng-class="{'hide'}">*@
            </div>
              <div class="col-md-6">
                  <div ng-show="reulstado">
                      <form method="get" action="http://localhost:58498" class="hide form-horizontal" role="form" id="formulario-respuesta">
                          <br>
                          <br><h3>Resultado:</h3>

                          <div ng-show="resultado"></div>

                          <h4>Cantidad</h4>
                          <div ng-show="contenedor-cantidad"></div>

                          <h4>Cuota</h4>
                          <div ng-show="contenedor-cuota"></div>

                          <h4>Plazos</h4>
                          <div ng-show="contenedor-plazos"></div>

                          <h4>Tipo</h4>
                          <div ng-show="tipo"></div>

                      </form>
                  </div>

                   </div>
               </div>

                       @*</div>*@


 </body>

angularjs

asked by SilviaGarcia 24.10.2016 в 14:24

source

2 answers

0

Your $ scope.enviar () that should be in the controller, add this line:

$scope.enviar() {
    $scope.showResult = true;
}

And the div parent of the whole result, or div container add this:

<div ng-show="showResult">
    Aquí va el resultado
</div>

With ng-show we tell you to show or make visible an HTML element only if the given condition is fulfilled, in this case if showResult is true
or true.

It is not necessary to use this block that I see in your code:

@*<div ng-class="{'hide'}">*@

@*</div>*@

I also observe in your code several ng-show="", in the result, because these are not necessary, so that you use only one in the div container or father of the whole result is enough, well it also depends on how much you want to hide.

answered by 24.10.2016 в 14:40

show loading image insert data into MySQL database with bash

score 2 · Accepted Answer

Remember that the advantage of working with Angularjs is that everything that changes in the controller is immediately reflected in the view and vice versa. For what you need you can define a variable that allows you to hide and show elements in your view, also give classes depending on a condition, etc.

I also noticed that your form goes directly to the URL of your API, you should change this and do it from the controller to use even more the powerful of angularJS and work with ng-model

On your controller it should be something like this:

.controller('CalculoCreditoCtrl, [$scope, $http, function($scope,$http){
      $scope.enviar = function() {
        data = data = {nombre : $scope.data.nombre, apellidos : $scope.data.apellidos, cuotas : $scope.data.cuotas}
        $http({
            method: 'POST',
            url: 'http://localhost:58498/api/Cuota',
            data: data

        }).then(function(response) {
             if(response.respuesta){
                $scope.mostrar_resultado = true;
             }
        });
    }
}])

And in your view the form should go like this:

<div>
     <input class="form-control" data-val="true"
                       data-val-cuotas="El campo de las Cuotas está vacío. No es válido"
                       data-val-required="El campo Cuotas es obligatorio." ng-model="data.cuotas"
                       name="cantidad" type="number" value="">
</div>

Your variable $scope.mostrar_resultado can be printed from your view with {{mostrar_resultado}} and you can use it to hide or show an element <div ng-show="mostrar_resultado">

If you realize you delete id=cuotas and replace it with ng-model=data.cuotas , this ng-model tag allows you to access the values of your inputs from your controller! This is one of the advantages of AngularJS that helps you in the handling of your data quickly! , your code does not take much Angularjs even though you are implementing it, I advise you to study a little more of AngularJS so you can make the most of it!

I leave a very complete link to start with AngularJS

AngularJS Tutorial