Curso de AngularJS y REST

Herramientas de usuario

Herramientas del sitio

Traza:
unidades:02_angular:07_nghide

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:07_nghide [2014/07/23 16:35] – [ng-show o ng-hide] adminunidades:02_angular:07_nghide [2014/08/29 20:25] (actual) – admin
Línea 1: Línea 1:
 ====== 2.7 Directiva ng-hide ====== ====== 2.7 Directiva ng-hide ======
-La directiva ''ng-hide'' permite que un elemento de la página se haga invisible o visible en función en función de cualquier valor del $scope y por lo tanto de nuestro modelo. Es la opuesta a la directiva [[unidades:02_angular:06_ngshow|ng-show]] pero lo que hace es ocultar el elemento si la expresión es ''true'' o hacerlo visible si la expresión es ''false''.+La directiva ''ng-hide'' permite que un elemento de la página se haga invisible o visible en función de cualquier valor del $scope y por lo tanto de nuestro modelo. Es la opuesta a la directiva [[unidades:02_angular:06_ngshow|ng-show]] pero lo que hace es ocultar el elemento si la expresión es ''true'' o hacerlo visible si la expresión es ''false''.
  
 En este caso no vamos a poner un ejemplo ya que funciona como la directiva [[unidades:02_angular:06_ngshow|ng-show]] pero al revés. En este caso no vamos a poner un ejemplo ya que funciona como la directiva [[unidades:02_angular:06_ngshow|ng-show]] pero al revés.
Línea 8: Línea 8:
  
 <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.
  
 ===== ng-show o ng-hide ===== ===== ng-show o ng-hide =====
-Aunque tampoco es muy importante usar uno u otro , si que viene bien decir cuando usar ''ng-show'' o ''ng-hide'' por coherencia en el proyecto.+Aunque tampoco es muy importante usar uno u otro , sí que viene bien decir cuándo usar ''ng-show'' o ''ng-hide'' por coherencia en el proyecto.
  
 Mi recomendación es usar el contrario a lo que ocurre por defecto. Me voy a explicar: Mi recomendación es usar el contrario a lo que ocurre por defecto. Me voy a explicar:
  
-Si inicialmente o lo normal es que el tag debe estar visible y lo que queremos es que se haga invisible cuando ocurra cierta condición, mi recomendación entonces es usar ''ng-hide'' ya que así estamos indicando que la regla/acción es ocultarlo cuando ocurre cierto evento pero que si no ocurriera estaría visible.+Si inicialmente o lo normal es que el tag esté visible y lo que queremos es que se haga invisible cuando ocurra cierta condición, mi recomendación entonces es usar ''ng-hide'' ya que así estamos indicando que la regla/acción es ocultarlo cuando ocurre cierto evento pero que si no ocurriera estaría visible.
  
-El caso contrario sería que si inicialmente o por defecto el tag debe estar oculto y lo que queremos es que se haga visible cuando ocurra cierta condición, mi recomendación entonces es usar ''ng-show'' ya que así estamos indicando que la regla/acción es mostrarlo cuando ocurre cierto evento pero que si no ocurriera estaría invisible.+El caso contrario sería que si inicialmente o por defecto el tag está oculto y lo que queremos es que se haga visible cuando ocurra cierta condición, mi recomendación entonces es usar ''ng-show'' ya que así estamos indicando que la regla/acción es mostrarlo cuando ocurre cierto evento pero que si no ocurriera estaría invisible.
  
 Otro caso que suele pasar es que realmente no hay una acción que muestre u oculte el elemento sino que en función del estado de otro campo esté o no visible. En ese caso no  tiene sentido preguntarse por el concepto de //normal// o //inicialmente//. En este último caso lo mejor es usar el que evite una condición negativa que siempre es un poco más difícil de entender. Otro caso que suele pasar es que realmente no hay una acción que muestre u oculte el elemento sino que en función del estado de otro campo esté o no visible. En ese caso no  tiene sentido preguntarse por el concepto de //normal// o //inicialmente//. En este último caso lo mejor es usar el que evite una condición negativa que siempre es un poco más difícil de entender.
Línea 54: Línea 54:
 ===== Referencias ===== ===== Referencias =====
   * [[https://docs.angularjs.org/api/ng/directive/ngHide|ngHide]]   * [[https://docs.angularjs.org/api/ng/directive/ngHide|ngHide]]
 +  * [[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/07_nghide.1406126155.txt.gz · Última modificación: por admin