I'm trying to show/hide an input depending on what has been selected in a Select but I can't
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 select options the value is 1, 2, 3, 0 and if I select option 0 the input should appear. I don't know if it's more convenient to use ng-if, ng-show or ng-hide.
AngularJS
function continuar () {
$rootScope.respuesta = false;
if (vm.contratacionData.beneficiarios[0].codigo === 'O') {
}
}
Honestly I don't know how to do the if to show the input, I have been trying with several examples taken from the internet and nothing or it still doesn't show me or it gives me an error and it doesn't load any data from the window.
Could you help me or give me 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
Imagine that you create an input in your HTML; if you use
ng-show/ng-hide
to show or hide said element it will do it without problem and - here is the difference with ng-if - it will be ALWAYS PRESENT IN THE DOM ; if you useng-if
to display it, this input will be created or removed from the DOM if it meets (or doesn't) the condition you gave it.This should work for you: