Show Input as selected in a Select

Question

Show Input as selected in a Select

Navigation

#1 by (2 votes)

1

I'm trying to show / hide an input according to what has been selected in a Select but I can not get it

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>

In the options of the select the value is 1, 2, 3, 0 and if I select the option 0 the input should appear. I do not know if it is more convenient to use ng-if, ng-show or ng-hide.

AngularJS

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

        } 
    }

I honestly do not know how to do the if to show the input, I've been testing with several examples taken from the internet and nothing or I still do not show or give me an error and do not load any data from the window.

Could you help me or give some guidelines to follow in order to create the function to show or hide the input when selecting the option in the Select?

Thank you very much

html5 angularjs

asked by derek 04.09.2018 в 15:36

source

1 answer

Generate SQL location number Convert string to HTML in Symfony

score 2 · Accepted Answer

Imagine that you create an input in your HTML; if you use ng-show/ng-hide to show or hide this element it will do it without problem and - here is the difference with ng-if - will be ALWAYS PRESENT IN THE DOM ; if you use ng-if to display it, this input will be created or removed from the DOM if it complies (or does not) with the condition you gave it.

This should help you:

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>