0

Buenas noches a tod@s:

  • Estoy trabajando en un formulario con AngularJS.

  • La idea es que al marcar un campo, se abran más opciones exclusivas para ese campo (es decir, sólo si esa opción está marcada).

  • Y sólo puedo marcar un campo de todos los posibles.

Con estas premisas, sobre todo la número 3, estoy probando con radio buttons. Pero se me está complicando una cosa: cuando selecciono un radio button, no encuentro la manera de hacer que el anterior pase a false (todos los valores son true or false). Es decir, se siguen viendo las opciones exclusivas para cuando ese radio button o checkbox están marcados (y su model a true). En la imagen se ven las de cuaderno cuando deberían estar ocultas.

Dejo una captura:

introducir la descripción de la imagen aquí

Si utilizo checkbox, es automático:

    <label key="admin.prototexto.form.caderno" for="caderno" class="col-sm-8 col-sm-offset-1" >
           <input type="checkbox" id="caderno" ng-model="ctrl.item.caderno">
           {{'admin.prototexto.form.caderno' | translate}}
    </label>

Se actualiza automáticamente el modelo al marcar y desmarcar.

Mi duda es, cuál es la forma correcta de hacer esto en angularJS con radio buttons o bien con checkboxes haciendo que sólo pueda estar marcado uno (estoy trabajando con la versión 1.x, que nunca he utilizado hasta este momento).

Muchas gracias.


Editado 1 para añadir datos solicitados

El código que empleo con radio button es el siguiente:

<label key="admin.prototexto.form.folhasSoltas" for="folhasSoltas" class="col-sm-8 col-sm-offset-1" >
   <input type="checkbox" id="folhasSoltas" ng-model="ctrl.item.folhasSoltas" name="optradio"  ng-value="true" >
   {{'admin.prototexto.form.folhasSoltas' | translate}}
 </label>
 <label key="admin.prototexto.form.caderno" for="caderno" class="col-sm-8 col-sm-offset-1" >
       <input type="radio" id="caderno" ng-model="ctrl.item.caderno" name="optradio"  ng-value="true" >
       {{'admin.prototexto.form.caderno' | translate}}
 </label>

El controlador:

(function () {
'use strict';

angular
    .module('app')
    .component('prototextoFormAdmin', {
        templateUrl: 'app/admin/dominio/prototexto/prototexto-form.admin.html',
        controller: Controller,
        controllerAs: 'ctrl',
        bindings: {
            item: '<',
            previousParams: '<',
            tipos: '<',
            genero: '<',
            assunto:'<',
            ciudades: '<',
            pais: '<',
            folha: '<',
        }
    });

/* @ngInject */
function Controller($timeout, $state, ModalService , CIUDAD_FORM_ADMIN, Pais, PAIS_FORM_ADMIN) {
    var vm = this;

    $timeout(function () {
        angular.element('.form-group:eq(0) input').focus();
    });

    vm.mode = $state.current.data.mode;
    vm.canSave = vm.mode === 'create' || vm.mode === 'edit';

    // Guardar formulario
    vm.save = function () {
        vm.item.$save().then(function () {
            ModalService.closeComponent(vm.item, 'admin/prototexto/list', vm.previousParams);
        });
    };

    vm.openCiudadModal = function () {
        ModalService.openComponent('admin.ciudad.create.title', CIUDAD_FORM_ADMIN, {size: 'lg'}).result.then(function (result) {

            // Añadimos el nuevo elemento al select
            vm.ciudades.push(result);
            // Asociamos el nuevo elemento a la entidad
            vm.item.ciudades.push(result);
        });
    };

    vm.openPaisModal = function () {
        ModalService.openComponent('admin.pais.create.title', PAIS_FORM_ADMIN, {size: 'lg'}).result.then(function (result) {
            // Asociamos el nuevo elemento a la entidad
            vm.item.pais = result;
        });
    };

    vm.paisService = Pais;


}

})();

4
  • Puedes agregar el código del controlador y el código que probaste con radio button? el 19 ago. 2017 a las 21:09
  • Añadida la información solicitada @AbsalonCastañon
    – Hugo L.M
    el 19 ago. 2017 a las 21:21
  • A ver si entendi. Tienes 3 checkbox y cada checkbox muestra/oculta controles correspondiente al checkbox seleccionado?
    – Einer
    el 20 ago. 2017 a las 16:24
  • Exacto @Einer. Y a su vez no se puede marcar más de un checkbox (es decir, lo que sería un radio button). Pero con los radio button en AngularJS no entiendo como hacer para que al marcar otra de las opciones, la variable que se acaba de desmarcar se ponga a false (con eso ya se ocultaría automáticamente sus campos propios).
    – Hugo L.M
    el 20 ago. 2017 a las 16:28

3 respuestas 3

1

Para que solo se pueda marcar un solo radio tienes que asignarle el mismo nombre a los radios button. Una vez hecho esto puedes mostrar/ocultar los campos correspondiente a cada radio con un la directiva ngShow y un flag en el modelo.

En este ejemplo hay un flag llamado $scope.opciones.seleccionado que es de tipo intero. Cuando seleccionado es igual a 1, entonces las opciones de cuadernos se mostraran ya que ngShow evaluara la expresion y asi sucesivamente con las demas opciones:

angular.module("app",[])
.controller("ctrl", function($scope){
  $scope.opciones = {
    seleccionado: -1
  };
  
  
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

  <div ng-app="app" ng-controller="ctrl">
  <div >
    <label for="">
      Cuadernos <input type="radio" name="opciones" ng-click="opciones.seleccionado = 1">
    </label>
    
    <label for="">
      Libros <input type="radio" name="opciones" ng-click="opciones.seleccionado = 2">
    </label>
  </div>
  
  <label for="">
      Revistas <input type="radio" name="opciones" ng-click="opciones.seleccionado = 3">
  </label>
  
  <div ng-show="opciones.seleccionado == 1">
    Mostrando cuadernos
  </div>
  <div ng-show="opciones.seleccionado == 2">
    Mostrando libros
  </div>
  <div ng-show="opciones.seleccionado == 3">
    Mostrando revistas
  </div>
    
  </div>

Actualizacion.

Ahora que me detengo a leer tu pregunta noto que quieres mostrar/ocultar los controlores con un modelo de tipo boolean.

Seria lo mismo que esta en el ejemplo de arriba solo que sera valido para 2 opciones porque boolean es true|false.

En el siguiente ejemplo le asignarias true o false opciones.cuadernos en vez de un numero al dar clic sobre un radio:

angular.module("app",[])
.controller("ctrl", function($scope){
  $scope.opciones = {
    cuadernos : true
  };
  
  
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

  <div ng-app="app" ng-controller="ctrl">
  <div >
    <label for="">
      Cuadernos <input checked type="radio" name="opciones" ng-click="opciones.cuadernos = true">
    </label>
    
    <label for="">
      Libros <input type="radio" name="opciones" ng-click="opciones.cuadernos = false">
    </label>
  </div>
 
  
  <div ng-show="opciones.cuadernos ">
    Mostrando cuadernos
  </div>
  <div ng-show="!opciones.cuadernos ">
    Mostrando libros
  </div>
 
    
  </div>

2
  • Exacto @Einer, se aproxima, pero estoy buscando algo como lo segundo que funcione con radio buttons. Se me ocurren distintas opciones con enumerados y demás. Pero aquí lo que se ajusta más es esta opción, por claridad para el usuario también.
    – Hugo L.M
    el 21 ago. 2017 a las 7:21
  • Además con este método siempre estaría mostrando uno de los dos, estuviera seleccionado o no. Y lo cargaría el DOM. Por contra con ng-if no. Muchas gracias por tus propuestas de todos modos @Einer, me están siendo de ayuda para contemplar otras opciones.
    – Hugo L.M
    el 21 ago. 2017 a las 7:40
0

No sé si será o no la forma más correcta, pero he llegado a una solución que aunque no hace lo que deseo, si impide marcar más checkboxes sin haber desmarcado el anterior.

    var limit = 1;
    $('input.single-checkbox').on('click', function (evt) {
        if ($('.single-checkbox:checked').length > limit) {
            this.checked = false;
        }
    });

Y cada del checkbox lo marco con la clase single-checkbox:

    <input class="single-checkbox" type="checkbox" id="folhasSoltas" ng-model="ctrl.item.folhasSoltas">

De esta manera consigo limitar el número de checkboxes al límite que ponga: 1, 2, 3...

Idea original o al menos de donde yo la he obtenido y adaptado a mi caso: Enlace a Stackoverflow con la propuesta

No la doy por solución, por si alguien puede conseguir una opción que marcando una opción, ponga el resto a false. También por si alguien ofrece la alternativa con los radio buttons. Y también porque la pregunta no era limitar el número de opciones. Pero si es una solución parcial al problema que de no encontrar una mejor, me serviría y podría ser útil a otra gente.

Lo he añadido a mi controlador de la siguiente manera:

    /* @ngInject */
function Controller($timeout, $state, ModalService , CIUDAD_FORM_ADMIN, Pais, PAIS_FORM_ADMIN) {

    var vm = this;

    var limit = 1;
    $('input.single-checkbox').on('click', function (evt) {
        if ($('.single-checkbox:checked').length > limit) {
            this.checked = false;
        }
    });

   [... Código no referente a la pregunta  ...]
0

function MyController($scope) {

  $scope.opciones = [{
    id: 1,
    nombre: 'opt1',
    valor: true
  }, {
    id: 2,
    nombre: 'opt2',
    valor: false
  }, {
    id: 3,
    nombre: 'opt3',
    valor: false
  }, ];

  $scope.toggle_opts = function(id) {
    for (var i = 0; i < $scope.opciones.length; i++) {
      if ($scope.opciones[i].valor === true) {
        $scope.opciones[i].valor = false;
      }
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app ng-controller="MyController">
  <div ng-repeat="opcion in opciones">
    <input type="checkbox" ng-click="toggle_opts(opcion.id)" ng-model="opcion.valor"> #{{opcion.nombre}}
    <br>
    <div ng-if="opcion.valor===true">
      Aqui van las opciones del {{opcion.nombre}}
    </div>
  </div>

Esta solución que te propongo funcionaria si quieres usar "checkbox", creo una funcion toggle_opts que se encarga de desmarcar el marcado y la bindeo al ng-click de cada checkbox. Es un CONCEPTO que deberías de aplicar si te sirve.

3
  • **Muchas gracias por tu propuesta @j0se, pero no me sirve.**Yo tengo 4 variables (5 si seleccionan un determinado enumerado en un campo anterior). Tu propuesta funciona para mostrar o no mostrar un determinado campo en el frontend. También para saber si ese valor es true or false en el front; pero no me modifica los valores del modelo. Mis 5 variables tienen cada una un nombre distinto y necesito que al marcar una y desmarcar por tanto las demás, este valor pase a false. Corrígeme si me equivoco. Acabo de probarla adaptándola a mi proyecto.
    – Hugo L.M
    el 22 ago. 2017 a las 7:52
  • 1
    No debo de estar entendiendo, las variables a las que he llamado opciones cada una tiene un nombre diferente opt1, opt2, opt3, y cada una tiene un valor al poner una a true las otras pasan a false, si añades un boton y le bindeas una funcion que recorra el array de opciones veras que cada "opt" tiene un valor, que al mandar el formulario unas iran a false y otra ira a true. Disculpa si no entendí y te estoy hablando en chino ;)
    – j0se
    el 22 ago. 2017 a las 8:14
  • Para nada @j0se, te estás haciendo entender. Muchas gracias. Trato de explicarme yo mejor: mi ng-model, si te fijas en mi post, altera el valor directamente de la variable en la base de datos. Esto es, al marcarlo, se pone a true y al desmarcarlo a false. Esto unido a los ng-if que utilizo, muestra o no distintos campos. Con tu propuesta, se muestran u ocultan campos y se modifican valores, pero sólo de cara a mostrarlos o no, no me modifica los valores en la base de datos. Lo que yo busco es la forma de que al marcar uno, el otro pase a false en la BD. No sólo a efectos de mostrar campos.
    – Hugo L.M
    el 22 ago. 2017 a las 8:27

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.