Muestra las diferencias entre dos versiones de la página.
unidades:02_angular:06_ngshow [2014/07/13 18:16] admin creado |
unidades:02_angular:06_ngshow [2014/08/29 20:20] (actual) admin |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
====== 2.6 Directiva ng-show ====== | ====== 2.6 Directiva ng-show ====== | ||
+ | La directiva ''ng-show'' permite que un elemento de la página se haga visible o invisible en función de cualquier valor del $scope y por lo tanto de nuestro modelo. Es muy similar a la directiva [[unidades:02_angular:05_ngdisabled|ng-disabled]] pero en vez de deshabilitar lo que hace es mostrar el elemento si la expresión es ''true'' o hacerlo invisible si la expresión es ''false''. | ||
+ | <note tip> | ||
+ | La forma que tiene angular de hacer invisible el elemento es incluyendo el estilo CSS de ''display:none''. | ||
+ | </note> | ||
+ | |||
+ | En nuestro ejemplo sólo tiene sentido que esté la cobertura de Fecundación In Vitro si el sexo de la persona es mujer.Así que sólo va a estar visible la cobertura de Fecundación In Vitro si el sexo es "''M''". | ||
+ | |||
+ | <sxh html;title:index.html; highlight: [25];> | ||
+ | <!DOCTYPE html> | ||
+ | <html ng-app="app"> | ||
+ | <head> | ||
+ | <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> | ||
+ | <script src="script.js"></script> | ||
+ | </head> | ||
+ | <body ng-controller="SeguroController"> | ||
+ | <form> | ||
+ | <fieldset> | ||
+ | <legend>Seguro Médico</legend> | ||
+ | <label for="nif">NIF:</label><input id="nif" name="nif" type="text" ng-model="seguro.nif" /><br> | ||
+ | <label for="nombre">Nombre:</label><input id="nombre" name="nombre" type="text" ng-model="seguro.nombre" /><br> | ||
+ | <label for="ape1">1º Apellido:</label><input id="ape1" name="ape1" type="text" ng-model="seguro.ape1" /><br> | ||
+ | <label for="edad">Edad:</label><input id="edad" name="edad" type="text" ng-model="seguro.edad" /><br> | ||
+ | <label for="sexo">Sexo:</label><select id="sexo" name="sexo" type="checkbox" ng-model="seguro.sexo" ><option value="">--Elige opcion--</option><option value="H">Hombre</option><option value="M">Mujer</option></select><br> | ||
+ | <label for="casado">Casado:</label><input id="casado" name="casado" type="checkbox" ng-model="seguro.casado" /><br> | ||
+ | <label for="numHijos">Nº Hijos:</label><input id="numHijos" name="numHijos" type="text" ng-model="seguro.numHijos" /><br> | ||
+ | <label for="embarazada">Embarazada:</label><input id="embarazada" name="embarazada" type="checkbox" ng-model="seguro.embarazada" /><br> | ||
+ | <label for="fechaCreacion">Fecha de creación:</label><input id="fechaCreacion" name="fechaCreacion" type="text" ng-model="seguro.fechaCreacion" /><br> | ||
+ | </fieldset> | ||
+ | <fieldset> | ||
+ | <legend>Coberturas</legend> | ||
+ | <label for="oftalmologia">Oftalmologia:</label><input id="oftalmologia" name="oftalmologia" type="checkbox" ng-model="seguro.coberturas.oftalmologia" /><br> | ||
+ | <label for="dental">Dental:</label><input id="dental" name="dental" type="checkbox" ng-model="seguro.coberturas.dental" /><br> | ||
+ | <label ng-show="seguro.sexo==='M'" for="fecundacionInVitro">Fecundacion In Vitro:</label><input ng-show="seguro.sexo==='M'" id="fecundacionInVitro" name="fecundacionInVitro" type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" /><br> | ||
+ | </fieldset> | ||
+ | <fieldset> | ||
+ | <legend>Enfermedades</legend> | ||
+ | <label for="corazon">Corazon:</label><input id="corazon" name="corazon" type="checkbox" ng-model="seguro.enfermedades.corazon" /><br> | ||
+ | <label for="estomacal">Estomacal:</label><input id="estomacal" name="estomacal" type="checkbox" ng-model="seguro.enfermedades.estomacal" /><br> | ||
+ | <label for="rinyones">Riñones:</label><input id="rinyones" name="rinyones" type="checkbox" ng-model="seguro.enfermedades.rinyones" /><br> | ||
+ | <label for="alergia">Alergia:</label><input id="alergia" name="alergia" type="checkbox" ng-model="seguro.enfermedades.alergia" /><br> | ||
+ | <label for="nombreAlergia">Nombre de la alergia:</label><input ng-disabled="seguro.enfermedades.alergia===false" id="nombreAlergia" name="nombreAlergia" type="text" ng-model="seguro.enfermedades.nombreAlergia" /><br> | ||
+ | </fieldset> | ||
+ | </form> | ||
+ | </body> | ||
+ | </html> | ||
+ | </sxh> | ||
+ | |||
+ | * Línea 25: Vemos como tanto al tag ''<label>'' como al tag ''<input>'' se les ha incluido la directiva ''ng-show'' con el valor ''seguro.sexo==='M'''. Por lo tanto esos dos tags sólo se mostrarán cuando el sexo sea "Mujer". | ||
+ | |||
+ | <sxh js;title:script.js> | ||
+ | var app=angular.module("app",[]); | ||
+ | |||
+ | function SeguroController($scope) { | ||
+ | $scope.seguro={ | ||
+ | nif:"", | ||
+ | nombre:"", | ||
+ | ape1:"", | ||
+ | edad:undefined, | ||
+ | sexo:"", | ||
+ | casado:false, | ||
+ | numHijos:undefined, | ||
+ | embarazada:false, | ||
+ | coberturas: { | ||
+ | oftalmologia:false, | ||
+ | dental:false, | ||
+ | fecundacionInVitro:false | ||
+ | }, | ||
+ | enfermedades:{ | ||
+ | corazon:false, | ||
+ | estomacal:false, | ||
+ | rinyones:false, | ||
+ | alergia:false, | ||
+ | nombreAlergia:"" | ||
+ | }, | ||
+ | fechaCreacion:new Date() | ||
+ | } | ||
+ | } | ||
+ | </sxh> | ||
+ | |||
+ | El fichero ''script.js'' no se ha modificado desde el ejemplo anterior. | ||
+ | ===== Expresión de la directiva ===== | ||
+ | La expresión que se puede poner en la directiva es del mismo tipo que [[unidades:02_angular:05_ngdisabled&#expresion_de_la_directiva|la expresión de la directiva ng-disabled]] | ||
+ | |||
+ | <note tip> | ||
+ | Recuerda que una referencia completa de lo que se puede poner como expresión está en {{:unidades:02_angular:angular_expressions_cheatsheet.pdf|}} | ||
+ | </note> | ||
+ | ===== Reglas de negocio del Interfaz de usuario ===== | ||
+ | Al igual que con [[unidades:02_angular:05_ngdisabled#reglas_de_negocio_del_interfaz_de_usuario|las reglas de negocio del interfaz de usuario de ng-disabled]] debemos pensar que ahora sólo es necesario indicar cada regla de negocio de interfaz de usuario una única vez y AngularJS llamará a dicha regla cada vez que se modifiquen los datos de los que depende. | ||
+ | ===== Ejemplo ===== | ||
+ | |||
+ | {{url>http://embed.plnkr.co/NrM2dR}} | ||
+ | |||
+ | ===== Referencias ===== | ||
+ | * [[https://docs.angularjs.org/api/ng/directive/ngShow|ngShow]] | ||
+ | * [[https://docs.angularjs.org/guide/expression|Developer Guide / Expressions]] | ||
+ | * {{:unidades:02_angular:angular_expressions_cheatsheet.pdf|AngularJS Expressions}} |