Saltar al contenido

Guía de ng-click, ng-show, ng-hide [Example]

Eventos de AngularJS

Eventos de AngularJS son las funcionalidades que permiten que las aplicaciones web interactúen con las entradas del usuario como el clic del mouse, las entradas del teclado, el deslizamiento del mouse, etc. Los eventos deben manejarse en aplicaciones web para 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, cambios de eventos, 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 guía de salida ng-click.

Veremos en detalle las guías de eventos durante este curso.

A este respecto Tutorial de AngularJS, aprenderás-

¿Qué es la guía ng-click en AngularJS?

El es “guía ng-click” Se usa en AngularJS para aplicar un comportamiento personalizado al hacer clic en un elemento en HTML. Esta guía se usa generalmente para botones porque es la más común para agregar eventos que responden a un clic realizado por el usuario. También se utiliza para alertas emergentes cuando se hace clic en un botón.

Sintaxis:


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

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

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

<!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>

Explicación del Código:

  1. Primero usamos la directiva ng-init para establecer el valor de conteo de una variable local en 0.
  2. Luego presentamos la guía de salida del botón ng-click. En esta guía, estamos escribiendo código para multiplicar el valor de la variable de conteo por 1.
  3. Aquí mostramos el valor de la variable de recuento al usuario.

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

Producción:

De la salida anterior,

¿Qué es la guía ng-show en AngularJS?

El es ng-Display guía Se usa en AngularJS para mostrar u ocultar una característica HTML particular basada en la expresión proporcionada para el atributo ng-show. En segundo plano, el elemento HTML se muestra u oculta al eliminar o agregar la clase CSS .ng-hide. Es una clase CSS predefinida que establece la visualización en ninguno.

Sintaxis:


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

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

Veamos un ejemplo de demostración de ng sobre cómo podemos usar la guía “ngshow event” para mostrar un elemento oculto.

<!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>

Explicación del Código:

  1. Adjuntamos la instrucción de salida ng-click al elemento del botón. Aquí nos referimos a una función llamada “ShowHide” que se define en nuestro controlador – DemoController.
  2. Estamos vinculando el atributo ng-show a una etiqueta div que contiene el texto en ángulo. Esta es la etiqueta que vamos a mostrar / ocultar según el atributo ng-show.
  3. En el controlador, conectamos 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. Primero configuramos esto en falso para que la etiqueta div esté oculta cuando se muestre la página por primera vez.

    Nota: – Cuando los atributos ng-show son verdaderos, al usuario se le mostrará el control subsiguiente que en nuestro caso es nuestra etiqueta div. Cuando el atributo ng-show se establece en falso, el control se ocultará al usuario.

  4. Estamos agregando código a la función ShowHide que realmente configurará la variable miembro IsVisible para que la etiqueta div se pueda mostrar al usuario.

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

Salida: 1

De la salida,

La salida ahora muestra la etiqueta div con el texto en ángulo.

¿Qué es la guía ng-hide en AngularJS?

El es guía ng-hide AngularJS es una función que usará un elemento oculto 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 al eliminar o agregar la clase CSS .ng-hide.

Sintaxis:


<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.

Observamos el ejemplo ng-hide similar al que se muestra para ngShow para mostrar cómo se puede usar el atributo ngHide.

<!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>

Explicación del Código:

  1. Adjuntamos la instrucción de salida ng-click al elemento del botón. Aquí nos referimos 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 en ángulo. Esta es la etiqueta, que vamos a mostrar / ocultar según el atributo ng-show.
  3. En el controlador, conectamos la variable miembro Most Sustainable al objeto de alcance. Este atributo se enviará al atributo angular ng-show para controlar la visibilidad del control div. Primero configuramos esto en falso para que la etiqueta div esté oculta cuando se muestre la página por primera vez.
  4. Estamos agregando código a la función ShowHide que realmente configurará la variable miembro IsVisible para que la etiqueta div se pueda mostrar al usuario.

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

Producción:

De la salida,

Instrucciones para la audiencia de eventos de AngularJS

Puede agregar detectores de eventos AngularJS a sus elementos HTML mediante una o más de las siguientes instrucciones:

Resumen