2

Estoy trabajando con Angularjs y tengo dos Radio button. Los tengo alineados y lo quiero es que estén uno debajo del otro y no soy capaz de hacerlo a pesar de buscar por Internet. Os adjunto una foto de como lo tengo ahora.

Abanca radio button

También os dejo aqui mi código Html además del codigo de java script:

Código html.

       { <div class="form-check">
            <label  class="form-check-label" ng-repeat="option in radioOptions">
                <input type="radio" ng-model="formulario.tipo" value="{{option.value}}" ng-required="!formulario.tipo" checked>
                {{option.name}}

            </label>

        </div>}

Código javaScript:

angular.module('formApp', [])
.controller('formAppCtrl', function ($scope, $http) {
    $scope.radioOptions = [
        { name: 'Crédito hipotecario', value: 'Crédito hipotecario' },
        
        { name: 'Crédito personal', value: 'Crédito personal' },
    ];
    $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;

        })
       
    }
});

2 respuestas 2

4

Puedes introducirlos en una lista ul e introducir cada uno de los elementos en un li distinto. Por último, utilizar display:block en estos últimos.

Ejemplo:

li{
  display: block;
}
<ul>
    <li  style="">
     <input class="radio" type="radio" name="custom_type" value="public" />Crédito hipotecario
     </li>
     <li>
     <input class="radio" type="radio" name="custom_type" 
     value="private" id="custom_venuetype_private" />Crédito personal
     </li>
 </ul>

2
  • 1
    Vale, muchas gracias! el 31 oct. 2016 a las 9:25
  • @SilviaGarcia De nada! Me alegra haberte ayudado :) el 31 oct. 2016 a las 9:26
0

Si estas usando bootstrap:

<div class="radio">
  <label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Option 3</label>
</div>

Tu Respuesta

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

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