Muestra las diferencias entre dos versiones de la página.
unidades:02_angular:06_ngshow [2014/07/15 19:13] admin [2.6 Directiva ng-show] |
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 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 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> | <note tip> | ||
- | La forma que tiene angular de hacer invibile el elemento es incluyendo el estilo CSS de ''display:none''. | + | La forma que tiene angular de hacer invisible el elemento es incluyendo el estilo CSS de ''display:none''. |
</note> | </note> | ||
- | En nuestro ejemplo solo tiene sentido que esté la cobertura de Fecundación In Vitro si el sexo de la persona es mujer.Así que solo va a estar visible la cobertura de Fecundación In Vitro si el sexo es "''M''". | + | 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];> | <sxh html;title:index.html; highlight: [25];> | ||
Línea 48: | Línea 48: | ||
</sxh> | </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 solo se mostrarán cuando el sexo sea "Mujer". | + | * 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> | <sxh js;title:script.js> | ||
Línea 85: | Línea 85: | ||
<note tip> | <note tip> | ||
- | Recuerda que una referencia completa de que se puede poner como expresión está en {{:unidades:02_angular:angular_expressions_cheatsheet.pdf|}} | + | Recuerda que una referencia completa de lo que se puede poner como expresión está en {{:unidades:02_angular:angular_expressions_cheatsheet.pdf|}} |
</note> | </note> | ||
===== Reglas de negocio del Interfaz de usuario ===== | ===== 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 solo 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. | + | 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 ===== | ===== Ejemplo ===== | ||
Línea 95: | Línea 95: | ||
===== Referencias ===== | ===== Referencias ===== | ||
* [[https://docs.angularjs.org/api/ng/directive/ngShow|ngShow]] | * [[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}} | * {{:unidades:02_angular:angular_expressions_cheatsheet.pdf|AngularJS Expressions}} |