3

¡Buenos días! Estoy comenzando con AngularJS, y tengo un formulario con dos radio button y un botón. Al darle al botón se me muestra otro formulario con el resultado del cálculo del primer formulario. Mi PROBLEMA es que todo se me muestra perfectamente menos los radio button que seleccioné. Tengo dos radio button: crédito hipotecario y crédito personal. Antes de clicar el botón, selecciono el crédito hipotecario y cuando le doy al botón, lo demás, se me muestra perfectamente menos el crédito hipotecario que os acabo de mencionar. Os agradezco de antemano vuestros comentarios y sugerencias.

Os dejo por aqui mi código HTML:

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

<div class="row" ng-app="formApp" ng-controller="formAppCtrl">
<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=""
                   ng-model="formulario.cantidad">
            <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=""
                   ng-model="formulario.plazos">
            <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"><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>
        <div>
            <button ng-click="myForm()">
                NG-ENVIAR
            </button>
        </div>
    </div>
</div>

<div class="col-md-6">
    <div ng-show="showMe">
        <form method="get" action="http://localhost:58498" class="form-horizontal" role="form" id="respuestaform">

            <br>
            <br><h3>Resultado:</h3>

            <div id="resultado"></div>

            <h4>Cantidad</h4>
            <div>{{contenedor.cantidad}}</div>

            <h4>Cuota</h4>
            <div>{{contenedor.cuota}}</div>

            <h4>Plazos</h4>
            <div>{{contenedor.plazos}}</div>

            <h4>Tipo</h4>
            <div>{{contenedor.tipo}}</div>

        </form>
    </div>

</div>
</div>

@*</div>*@
<!-- /ko -->

Añado el controlador:

angular.module('formApp', [])
.controller('formAppCtrl', function ($scope, $http) {
  $scope.contenedor = {};
  $scope.contenedor.cantidad = "";
  $scope.contenedor.cuota = "";
  $scope.contenedor.plazos = "";
  $scope.contenedor.tipo ="";

  $scope.formulario = {}
  $scope.formulario.cantidad = 0;
  $scope.formulario.plazos = 0;
  $scope.formulario.tipo = "";

  var logresultado = function (respuesta) {
    $scope.contenedor.cantidad = respuesta.cantidad;
    $scope.contenedor.cuota = respuesta.cuota;
    $scope.contenedor.plazos = respuesta.plazos
    $scope.contenedor.tipo = respuesta.tipo;
  };

  $scope.showMe = false;

  $scope.myForm = function () {

    var baseURL = 'http://localhost:58498/api/cuota?';
    var cantidad = 'cantidad=' + $scope.formulario.cantidad;
    var plazos = '&plazos=' + $scope.formulario.plazos;
    var tipo = '&tipo=' + $scope.formulario.tipo;

    $http.get(baseURL+cantidad+plazos+tipo).success(function (respuesta) {

        console.log(respuesta)
        logresultado(respuesta);

      console.log('entra aqui')
      $scope.showMe = !$scope.showMe;

    })

  }
});

1 respuesta 1

3

Mirate la documentación y el ejemplo que viene con la misma:

https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

Si estás utilizando angularjs deberías poner ng-model en los input. De esta forma tienes el valor del input en el controlador.

De todas formas no has puesto el código del controlador...

copio el ejemplo aquí por si acaso:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Example - example-radio-input-directive-production</title>


      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>



    </head>
    <body ng-app="radioExample">
      <script>
      angular.module('radioExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.color = {
            name: 'blue' // el ng-model del radio, inicializado en blue
          };
          $scope.specialValue = { // este es un ejemplo para añadir un json en este caso
            "id": "12345",
            "value": "green"
          };
        }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
      <label>
        <input type="radio" ng-model="color.name" value="red">
        Red
      </label><br/>
      <label>
        <input type="radio" ng-model="color.name" ng-value="specialValue">
        Green
      </label><br/>
      <label>
        <input type="radio" ng-model="color.name" value="blue">
        Blue
      </label><br/>
      <tt>color = {{color.name | json}}</tt><br/>
     </form>
     Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
    </body>
    </html>

Edito con fiddle:

https://jsfiddle.net/nptj4k4f/

8
  • Perdona no me di cuenta lo del controlador, gracias por avisar. Ya añadi el controlador y además incluí todo el html de mi proyecto para que quedara mas claro. Commented el 28 oct. 2016 a las 9:28
  • 1
    Te ha funcionado ya? en el html falta el form, pero bueno imagino que has puesto el ng-model = contenedor.tipo. Si quieres puedes añadir un valor por defecto con algo en plan $scope.formulario.tipo = "credito hipotecario";. Y los input podrían ser <input type="radio" ng-model=".formulario.tipo" ng-value="credito hipotecario"><input type="radio" ng-model=".formulario.tipo" ng-value="credito personal">. Se podría hacer con ng-repeat si tuvieras un array de opciones en el controlador, pero poco a poco. Por cierto, si te ha funcionado confirmalo
    – Mikel
    Commented el 28 oct. 2016 a las 9:39
  • Donde he puesto .formulario.tipo queria haber puesto formulario.tipo
    – Mikel
    Commented el 28 oct. 2016 a las 9:45
  • No, porque ahora le añadi lo último que me habias puesto (<input type="radio" ng-model=".formulario.tipo" ng-value="credito hipotecario">) y debo de hacer algo mal en el controlador que no me funciona. Escribi en el controlador esto: class="form-check-input" name="tipo" id="optionsRadios1" value="hipotecario". Pero lo coloque debajo del $scope.myForm = function(){ debajo de donde pongo la url} Commented el 28 oct. 2016 a las 9:59
  • 1
    He editado la respuesta añadiendo un fiddle al final. No se si es lo que buscas
    – Mikel
    Commented el 28 oct. 2016 a las 11:09

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.