Evénements AngularJS: ng-click, ng-show, ng-hide (exemple)

Table des matières:

Anonim

Lors de la création d'applications Web, votre application devra tôt ou tard gérer les événements DOM tels que les clics de souris, les déplacements, les pressions sur le clavier, les événements de changement, etc.

AngularJS peut ajouter des fonctionnalités qui peuvent être utilisées pour gérer de tels événements.

Par exemple, s'il y a un bouton sur la page et que vous souhaitez traiter quelque chose lorsque le bouton est cliqué, nous pouvons utiliser la directive d'événement ng-click.

Nous examinerons les directives d'événement en détail au cours de ce cours.

Dans ce didacticiel, vous apprendrez-

  • Qu'est-ce que la directive ng-click?
  • Qu'est-ce que la directive ng-show?
  • Qu'est-ce que la directive ng-hide?

Qu'est-ce que la directive ng-click?

La "directive ng-click" est utilisée pour appliquer un comportement personnalisé lorsqu'un élément en HTML a cliqué. Ceci est normalement utilisé pour les boutons car c'est l'endroit le plus courant pour ajouter des événements qui répondent aux clics effectués par l'utilisateur

Regardons un exemple simple de la façon dont nous pouvons implémenter l'événement click.

Dans cet exemple, nous aurons une variable de compteur qui s'incrémentera en valeur lorsque l'utilisateur cliquera sur un bouton.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Explication du code:

  1. Nous utilisons d'abord la directive ng-init pour définir la valeur d'un nombre de variables locales sur 0.
  2. Nous introduisons ensuite la directive d'événement ng-click dans le bouton. Dans cette directive, nous écrivons du code pour incrémenter la valeur de la variable count de 1.
  3. Ici, nous affichons la valeur de la variable count à l'utilisateur.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

À partir de la sortie ci-dessus,

  • On voit que le bouton "Incrément" est affiché et que la valeur de la variable de comptage est initialement nulle.
  • Lorsque vous cliquez sur le bouton Incrément, la valeur du comptage est incrémentée en conséquence, comme indiqué dans l'image de sortie ci-dessous.

Qu'est-ce que la directive ng-show?

La directive ng-Show est utilisée pour afficher ou masquer un élément HTML donné en fonction de l'expression fournie à l'attribut ngShow. En arrière-plan, l'élément est affiché ou masqué en supprimant ou en ajoutant la classe CSS .ng-hide sur l'élément.

En arrière-plan, l'élément est affiché ou masqué en supprimant ou en ajoutant la classe CSS .ng-hide sur l'élément.

Regardons un exemple de la façon dont nous pouvons utiliser la directive "ngshow event" pour afficher un élément caché.

Event Registration

Guru99 Global Event




Angular

Explication du code:

  1. Nous attachons la directive d'événement ng-click à l'élément button. Ici, nous faisons référence à une fonction appelée "ShowHide" qui est définie dans notre contrôleur - DemoController.
  2. Nous attachons l'attribut ng-show à une balise div qui contient le texte Angular. C'est la balise que nous allons afficher / masquer en fonction de l'attribut ng-show.

  3. Dans le contrôleur, nous attachons la variable membre "IsVisible" à l'objet scope. Cet attribut sera passé à l'attribut angulaire ng-show (étape # 2) pour contrôler la visibilité du contrôle div. Nous définissons initialement ceci sur false afin que lorsque la page est affichée pour la première fois, la balise div soit masquée.

    Remarque: - Lorsque les attributs ng-show sont définis sur true, le contrôle suivant qui dans notre cas est la balise div sera affiché à l'utilisateur. Lorsque l'attribut ng-show est défini sur false, le contrôle sera masqué à l'utilisateur.

  4. Nous ajoutons du code à la fonction ShowHide qui définira la variable membre IsVisible sur true afin que la balise div puisse être affichée à l'utilisateur.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Sortie: 1

De la sortie,

  • Vous pouvez initialement voir que la balise div qui a le texte "AngularJS" n'est pas affichée et c'est parce que l'objet scope isVisible est initialement défini sur false qui est ensuite passé à la directive ng-show de la balise div.
  • Lorsque vous cliquez sur le bouton "Afficher AngularJS", il change la variable membre isVisible pour devenir vrai et par conséquent le texte "Angular" devient visible pour l'utilisateur. La sortie ci-dessous sera montrée à l'utilisateur.

La sortie affiche maintenant la balise div avec le texte angulaire.

Qu'est-ce que la directive ng-hide?

Avec la directive ng-hide, un élément sera masqué si l'expression est TRUE. Si l'expression est FALSE, l'élément sera affiché. En arrière-plan, l'élément est affiché ou masqué en supprimant ou en ajoutant la classe CSS .ng-hide sur l'élément.

Par contre avec ng-hide, l'élément est masqué si l'expression est vraie et il sera affiché si elle est fausse.

Examinons l'exemple similaire à celui présenté pour ngShow pour montrer comment l'attribut ngHide peut être utilisé.

Event Registration

Guru99 Global Event




Angular

Explication du code:

  1. Nous attachons la directive d'événement ng-click à l'élément button. Ici, nous faisons référence à une fonction appelée ShowHide qui est définie dans notre contrôleur - DemoController.
  2. Nous attachons l'attribut ng-hide à une balise div qui contient le texte Angular. Il s'agit de la balise, que nous allons afficher / masquer en fonction de l'attribut ng-show.
  3. Dans le contrôleur, nous attachons la variable membre isVisible à l'objet scope. Cet attribut sera passé à l'attribut angular ng-show pour contrôler la visibilité du contrôle div. Nous définissons initialement ceci sur false afin que lorsque la page est affichée pour la première fois, la balise div soit masquée.
  4. Nous ajoutons du code à la fonction ShowHide qui définira la variable membre IsVisible sur true afin que la balise div puisse être affichée à l'utilisateur.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

De la sortie,

  • Vous pouvez initialement voir que la balise div qui contient le texte "AngularJs" est initialement affichée car la valeur de propriété false est envoyée à la directive ng-hide.
  • Lorsque nous cliquons sur le bouton "Hide Angular", la valeur de la propriété true sera envoyée à la directive ng-hide. Par conséquent, la sortie ci-dessous sera affichée, dans laquelle le mot "Angular" sera caché.

Directives d'écouteur d'événements AngularJS

Vous pouvez ajouter des écouteurs d'événements AngularJS à vos éléments HTML en utilisant une ou plusieurs de ces directives:

  • ng-flou
  • ng-change
  • ng-clic
  • ng-copie
  • 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-coller

Résumé

  • Les directives d'événements sont utilisées dans Angular pour ajouter du code personnalisé afin de répondre aux événements générés par l'intervention de l'utilisateur tels que les clics de bouton, les clics de clavier et de souris, etc.
  • La directive d'événement la plus courante est la directive ng-click qui est utilisée pour gérer les événements de clic. L'utilisation la plus courante de ceci est pour les clics de bouton où le code peut être ajouté pour répondre à un clic de bouton.
  • Les éléments HTML peuvent également être masqués ou affichés à l'utilisateur en conséquence en utilisant les attributs angulaires ng-show et ng-hide.