Herramientas de usuario

Herramientas del sitio


unidades:02_angular:06_ngshow

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión
Revisión previa
unidades:02_angular:06_ngshow [2014/07/15 19:13] – [2.6 Directiva ng-show] adminunidades: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}}
unidades/02_angular/06_ngshow.1405444427.txt.gz · Última modificación: por admin