Directivas AngularJS ng-click, ng-show y ng-hide con ejemplo

Por: james hartman james hartman
Hours Actualizado

Eventos de AngularJS

Eventos de AngularJS son las funcionalidades que permiten que las aplicaciones web interactúen con las entradas del usuario, como clics del mouse, entradas del teclado, desplazamiento del mouse, etc. Los eventos deben manejarse en aplicaciones basadas en web para poder realizar tareas y acciones específicas. Se activa cuando el usuario realiza una acción específica.

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

AngularJS puede agregar funcionalidad que puede usarse 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 evento Angular ng-click.

Analizaremos las directivas de eventos en detalle durante este curso.

¿Qué es la directiva ng-click en AngularJS?

El “directiva ng-click” en AngularJS se utiliza para aplicar un comportamiento personalizado cuando se hace clic en un elemento en HTML. Esta directiva normalmente se usa para botones porque es el lugar más común para agregar eventos que responden a los clics realizados por el usuario. También se utiliza para mostrar alertas emergentes cuando se hace clic en un botón.

Sintaxis de ng-click en AngularJS

<element
 ng-click="expression">
</element>

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

Ejemplo de ng-click en AngularJS

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

Directiva ng-click en AngularJS
Ejemplo de ng clic en AngularJS
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Code Explicación:

  1. Primero estamos usando la directiva ng-init para establecer el valor de un recuento de variables locales en 0.
  2. Luego introducimos la directiva de evento ng-click en el botón. En esta directiva, estamos escribiendo código para incrementar el valor de la variable de conteo en 1.
  3. Aquí mostramos el valor de la variable de recuento al usuario.

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

Salida:

ng-clic en AngularJS

Del resultado anterior,

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

ng-clic en AngularJS

ARTÍCULOS RELACIONADOS

¿Qué es la directiva ng-show en AngularJS?

El directiva ng-Show en AngularJS se utiliza para mostrar u ocultar un determinado determinado HTML elemento basado en la expresión proporcionada al atributo ng-show. En segundo plano, el elemento HTML se muestra u oculta eliminando o agregando la clase CSS .ng-hide al elemento. Es una clase CSS predefinida que establece la visualización en ninguno.

Sintaxis de ng-show en AngularJS

<element
 ng-show="expression">
</element>

En segundo plano, el elemento se muestra u oculta eliminando o agregando la clase CSS .ng-hide al elemento.

Ejemplo de ng-show en AngularJS

Veamos un ng-show en Angular Ejemplo de cómo podemos usar la directiva "ngshow event" para mostrar un elemento oculto.

Directiva ng-show en AngularJS

Ejemplo de ng show en Angular
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show = "IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

Code Explicación:

  1. Adjuntamos la directiva de evento ng-click al elemento del botón. Aquí hacemos referencia a una función llamada "ShowHide" que está definida en nuestro controlador: DemoController.
  2. Adjuntamos el atributo ng-show a una etiqueta div que contiene el texto Angular. Esta es la etiqueta que vamos a mostrar/ocultar según el atributo ng-show.
  3. En el controlador, adjuntamos 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 configuramos esto en falso para que cuando la página se muestre por primera vez, la etiqueta div esté oculta. Nota: - Cuando los atributos ng-show se establecen en verdadero, se mostrará al usuario el control posterior que en nuestro caso es la etiqueta div. Cuando el atributo ng-show se establece en falso, el control estará oculto para el usuario.
  4. Estamos agregando código a la función ShowHide que establecerá la variable miembro IsVisible en verdadero para que la etiqueta AngularJS show hide div on click pueda mostrarse al usuario.

Si el código para ng-show y ng-hide en AngularJS se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida: 1

Directiva ng-show en AngularJS

Desde 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 falso, 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 que se vuelva verdadera y, por lo tanto, el texto "Angular" se vuelve visible para el usuario. El siguiente resultado se mostrará al usuario.

Directiva ng-show en AngularJS

El resultado ahora muestra la etiqueta div con el texto angular.

¿Qué es la directiva ng-hide en AngularJS?

El directiva ng-ocultar en AngularJS hay una función mediante la cual se ocultará un elemento si la expresión es VERDADERA. Si la expresión es FALSA, se mostrará el elemento. En segundo plano, el elemento se muestra u oculta eliminando o agregando la clase CSS .ng-hide al elemento.

Sintaxis de ng-hide en AngularJS

<element
 ng-hide="expression">
</element>

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

Ejemplo de ng-hide en AngularJS

Veamos el ejemplo de ng-hide similar al que se muestra para ngShow para mostrar cómo se pueden usar los atributos ng-hide y ng-show.

Directiva ng-hide en AngularJS

Ejemplo de ng-hide en AngularJS
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

Code Explicación:

  1. Adjuntamos la directiva de evento ng-click al elemento del botón. Aquí hacemos referencia a una función llamada ShowHide que está definida en nuestro controlador: DemoController.
  2. Adjuntamos el atributo ng-hide a una etiqueta div que contiene el texto Angular. Esta es la etiqueta que usaremos para mostrar ocultar en Angular según el atributo ng-show.
  3. En el controlador, adjuntamos 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 configuramos esto en falso para que cuando la página se muestre por primera vez, la etiqueta div esté oculta.
  4. Estamos agregando código a la función ShowHide que establecerá la variable miembro IsVisible en verdadero para que la etiqueta div se pueda mostrar al usuario.

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

Salida:

Directiva ng-hide en AngularJS

Desde la salida,

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

Directiva ng-hide en AngularJS

Directivas de escucha de eventos de AngularJS

Puede agregar detectores de eventos AngularJS a sus elementos HTML utilizando uno o más de estos directivas:

  • ng-desenfoque
  • ng-cambio
  • ng-clic
  • ng-copia
  • corte ng
  • ng-dblclick
  • ng-enfoque
  • ng-keydown
  • ng-pulsación de tecla
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-movimiento del mouse
  • ng-mouseover
  • ng-mouseup
  • pasta ng

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 del teclado y del mouse, etc.
  • La directiva de eventos más común es la directiva ng-click de AngularJS que se utiliza para manejar eventos de clic. El uso más común de esto es para hacer clic en botones de AnluarJS, donde se puede agregar código para responder a un clic en un botón.
  • Los elementos HTML también se pueden ocultar o mostrar al usuario en consecuencia utilizando el Directiva AngularJS ng-show, Directiva angular ng-hide y atributos ng-visible.

Resumir este post con: