2

Estoy intentando mostrar/ocultar un input según lo que se ha seleccionado en un Select pero no lo consigo

HTML

<section class="row nm">
                            <div class="column g-12 nbp denunciaMsg">
                                <mm-msg description="{{apResumenHogar.msgText}}" type="info" title="">
                            </div>
                            <div>
                                <div class="column g-6 fg twoFieldRow">
                                    <select ng-class="{'likePlaceholder': !resumenVidaCtrl.comboVal}" ng-model="resumenVidaCtrl.comboVal" style="width: 80%;">
                                        <option value="{{item.codigo}}" ng-repeat="item in resumenVidaCtrl.masterTipoBeneficiario">{{item.descripcion}}</option>
                                    </select>
                                </div>
                                <div class="wrapInput beneficiario" ng-if="resumenVidaCtrl.contratacionData.beneficiarios[0].codigo === 'O'">
                                    <input type="text" maxlength="320" name="otrosBeneficiarios" id="otrosBeneficiarios" ng-model="resumenVidaCtrl.textoBeneficiarios" placeholder="Indica Nombre y DNI de los beneficiarios">
                                    <label><span class="help">Si hay más de un beneficiario sepáralos con una coma (,). Ej. Juan López Pérez 50123456Z, José Domínguez López 50234567X.<br/>También puedes designar beneficiarios con un texto libre Ej. Mis hijos.</span></label>
                                </div>
                            </div>
                        </section>

En las opciones del select el value es 1, 2, 3, 0 y si selecciono la opción 0 me tendría que aparecer el input. no sé si es más conveniente usar ng-if, ng-show o ng-hide.

AngularJS

function continuar () {
        $rootScope.respuesta = false;
         if (vm.contratacionData.beneficiarios[0].codigo === 'O') {

        } 
    }

Sinceramente no sé como hacer el if para mostrar el input, he ido probando con varios ejemplos sacados de internet y nada o me sigue sin mostrar o me da un error y no me carga ningún dato de la ventana.

Me podríais ayudar o dar unas directrices a seguir para poder crear la función para mostrar u ocultar el input al seleccionar la opción en el Select?

Muchas gracias

2
  • No necesitas aplicar la lógica para ocultar o mostrar un elemento del DOM en un controller de Angular... sólo debes validar que el valor del select corresponde a lo que quieres para mostrar u ocultar dicho input.. ng-if="condicion" el 4 sep. 2018 a las 13:54
  • Cómo sería entonces ng-if="resumenVidaCtrl.item.codigo.value === 'O'" para que recoja el value del select?
    – derek
    el 4 sep. 2018 a las 14:05

1 respuesta 1

3

Imagina que creas en tu HTML un input; si utilizas ng-show/ng-hide para mostrar u ocultar dicho elemento lo hará sin problema y - acá esta la diferencia con ng-if - estará SIEMPRE PRESENTE EN EL DOM; si utilizas ng-if para mostrarlo, este input se creará o eliminará del DOM si cumple (o no) la condición que le diste.

Esto debería servirte:

var app = angular.module('app', []);
app.controller('ctrl', ['$scope', function($scope){
  $scope.opciones = [
    { value: 0, name: 'Opción 0' },
    { value: 1, name: 'Opción 1' },
    { value: 2, name: 'Opción 2' },
    { value: 3, name: 'Opción 3' }
  ]
  $scope.selectOption = {};
}])
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" ng-app="app">
  <div class="row" ng-controller="ctrl">
    <div class="col-md-12">
      <div class="form-group col-md-6">
        <label class="control-label">Opciones</label>
        <select class="form-control" ng-model="selectOption" ng-options="o.value as o.name for o in opciones"></select>
      </div>
      
      <div class="form-group col-md-6" ng-if="selectOption == 0" ng-cloak>
        <label class="control-label">Input</label>
        <input type="text" class="form-control">
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>

3
  • Cómo puedo implementar este ejemplo en angular 9? necesito salga un input al seleccionar una opción especifica del select el 27 oct. 2020 a las 20:27
  • El detalle de esta solución es que cuando envías los datos a la base de datos, se guardan con el tipo dato, ejemplo: -Si seleccionamos el la opción 3, al enviar los datos, los devuelve así: number:3 En vez de: 3 ¿Qué se podría implementar para que no arroje el tipo de dato? el 8 feb. 2021 a las 23:18
  • De ser así, signfica que estas enviando el objeto completo, por lo que sólo tendrías que acceder a la propiedad correspondiente y acceder al valor. Ej => const data = tuObjeto.propiedad el 9 feb. 2021 a las 12:10

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.