AngularJS Events: ng-click, ng-show, ng-hide [Ejemplo]

Al crear aplicaciones basadas en la web, tarde o temprano su aplicación tendrá que manejar eventos DOM como clics del mouse, movimientos, pulsaciones del teclado, eventos de cambio, etc.

AngularJS puede agregar funcionalidad que se puede usar para manejar tales eventos.

Por ejemplo, si hay un botón en la página y desea procesar algo cuando se hace clic en el botón, podemos usar la directiva de eventos ng-click.

Vamos a examinar las directivas de eventos en detalle durante este curso.

En este tutorial, usted aprenderá –

La directiva ng-click

La “directiva ng-click” se utiliza para aplicar el comportamiento personalizado a cuando un elemento en HTML hizo clic. Normalmente se utiliza para botones porque es el lugar más común para agregar eventos que responden a clics realizados por el usuario.

Veamos un ejemplo simple de cómo podemos implementar el evento click.

En este ejemplo, tendremos una variable de contador que aumentará en valor cuando el usuario haga clic en un botón.

Explicación del código:

  1. Primero estamos usando la directiva ng-init para establecer el valor de un recuento de variables locales en 0.
  2. A continuación, vamos a introducir la directiva de eventos ng-click en el botón. En esta directiva, estamos escribiendo código para incrementar el valor de la variable de recuento por 1.
  3. Aquí estamos mostrando el valor de la variable de recuento al usuario.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

A partir del producto anterior,

  • Podemos ver que se muestra el botón “Incremento” y el valor de la variable de recuento es inicialmente cero.
  • Al hacer clic en el botón Incremento, el valor del recuento se incrementa en consecuencia como se muestra en la imagen de salida a continuación.

 

Mostrar elementos HTML usando ng-show

La directiva ngShow se utiliza para mostrar u ocultar un elemento HTML dado basado en la expresión proporcionada al atributo ngShow.

En el fondo, el elemento se muestra u oculta eliminando o agregando la clase CSS .ng-hide en el elemento.

Veamos un ejemplo de cómo podemos usar la directiva “ngshow event” para mostrar un elemento oculto.

Explicación del código:

  1. Estamos adjuntando la directiva de eventos ng-click al elemento button. Aquí estamos haciendo referencia a una función llamada “ShowHide” que se define en nuestro controlador — DemoController.
  2. Estamos adjuntando el atributo ng-show a una etiqueta div que contiene el texto Angular. Esta es la etiqueta que vamos a mostrar/ocultar en función del atributo ng-show.
  3. En el controlador, estamos adjuntando la variable miembro “isVisible” al objeto de alcance. Este atributo se pasará al atributo angular ng-show (paso #2) para controlar la visibilidad del control div. Inicialmente estamos configurando esto en falso para que cuando la página se muestre por primera vez la etiqueta div se oculte.

Nota: – Cuando los atributos ng-show se establece en true, el control posterior que en nuestro caso es la etiqueta div se mostrará al usuario. Cuando el atributo ng-show se establece en false, el control se ocultará al usuario.

  1. Estamos agregando código a la función ShowIDE que establecerá la variable miembro IsVisible en true para que la etiqueta div se pueda mostrar al usuario.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida: 1

De la salida,

  • Inicialmente puede ver que la etiqueta div que tiene el texto “AngularJS” no se muestra y esto se debe a que el objeto de alcance IsVisible se establece inicialmente en false, que luego se pasa a la directiva ng-show de la etiqueta div.
  • Cuando hace clic en el botón “Mostrar AngularJS”, cambia la variable miembro IsVisible para convertirse en verdadera y, por lo tanto, el texto “Angular” se vuelve visible para el usuario. La siguiente salida se mostrará al usuario.

La salida ahora muestra la etiqueta div con el texto angular.

Ocultar elementos HTML usando ng-hide

Al igual que la directiva ngShow, también existe la directiva ng-hide. Con ng-show el elemento se muestra si la expresión es verdadera, se ocultará si es falsa.

Por otro lado, con ng-hide, el elemento está oculto si la expresión es verdadera y se mostrará si es falsa.

Veamos el ejemplo similar al que se muestra para ngShow para mostrar cómo se puede usar el atributo ngHide.

Explicación del código:

  1. Estamos adjuntando la directiva de eventos ng-click al elemento button. Aquí estamos haciendo referencia a una función llamada ShowHide que se define en nuestro controlador — DemoController.
  2. Estamos adjuntando el atributo ng-hide a una etiqueta div que contiene el texto Angular. Esta es la etiqueta, que vamos a mostrar/ocultar en función del atributo ng-show.
  3. En el controlador, estamos adjuntando la variable miembro IsVisible al objeto de alcance. Este atributo se pasará al atributo angular ng-show para controlar la visibilidad del control div. Inicialmente estamos configurando esto en falso para que cuando la página se muestre por primera vez la etiqueta div se oculte.
  4. Estamos agregando código a la función ShowIDE que establecerá la variable miembro IsVisible en true para que la etiqueta div se pueda mostrar al usuario.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

De la salida,

  • Inicialmente puede ver que la etiqueta div que tiene el texto “AngularJS” se muestra inicialmente porque el valor de la propiedad de false se envía a la directiva ng-hide.
  • Cuando hacemos clic en el botón “Ocultar angular”, el valor de la propiedad de true se enviará a la directiva ng-hide. Por lo tanto, se mostrará la siguiente salida, en la que se ocultará la palabra “Angular”.

Directivas de escucha de eventos AngularJS

Puede agregar oyentes de eventos AngularJS a sus elementos HTML utilizando una o más de estas directivas:

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

Resumen

  • Las directivas de eventos se utilizan en Angular para agregar código personalizado para responder a eventos generados por la intervención del usuario, como clics de botones, clics de teclado y ratón, etc.
  • La directiva de eventos más común es la directiva ng-click que se utiliza para manejar eventos de clic. El uso más común de esto es para clics de botones en los que se puede agregar código para responder a un clic de botón.
  • Los elementos HTML también se pueden ocultar o mostrar al usuario en consecuencia mediante el uso de los atributos angulares ng-show y ng-hide.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *