====== 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''. La forma que tiene angular de hacer invisible el elemento es incluyendo el estilo CSS de ''display:none''. 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''". * Línea 25: Vemos como tanto al tag '''' como al tag '''' 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". 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() } } 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]] Recuerda que una referencia completa de lo que se puede poner como expresión está en {{:unidades:02_angular:angular_expressions_cheatsheet.pdf|}} ===== 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}}