Eventi AngularJS: ng-click, ng-show, ng-hide (Esempio)

Sommario:

Anonim

Durante la creazione di applicazioni basate sul Web, prima o poi la tua applicazione dovrà gestire eventi DOM come clic del mouse, mosse, pressioni sulla tastiera, eventi di modifica, ecc.

AngularJS può aggiungere funzionalità che possono essere utilizzate per gestire tali eventi.

Ad esempio, se nella pagina è presente un pulsante e si desidera elaborare qualcosa quando si fa clic sul pulsante, è possibile utilizzare la direttiva dell'evento ng-click.

Esamineremo in dettaglio le direttive dell'evento durante questo corso.

In questo tutorial imparerai-

  • Cos'è la direttiva ng-click?
  • Cos'è la direttiva ng-show?
  • Cos'è la direttiva ng-hide?

Cos'è la direttiva ng-click?

La "direttiva ng-click" viene utilizzata per applicare un comportamento personalizzato quando un elemento in HTML fa clic. Questo è normalmente utilizzato per i pulsanti perché è il luogo più comune per aggiungere eventi che rispondono ai clic eseguiti dall'utente

Diamo un'occhiata a un semplice esempio di come possiamo implementare l'evento click.

In questo esempio, avremo una variabile contatore che aumenterà di valore quando l'utente fa clic su un pulsante.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Spiegazione del codice:

  1. Per prima cosa stiamo usando la direttiva ng-init per impostare il valore di una variabile locale count a 0.
  2. Stiamo quindi introducendo la direttiva dell'evento ng-click al pulsante. In questa direttiva, stiamo scrivendo codice per incrementare il valore della variabile count di 1.
  3. Qui stiamo mostrando all'utente il valore della variabile count.

Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.

Produzione:

Dall'output di cui sopra,

  • Possiamo vedere che viene visualizzato il pulsante "Increment" e il valore della variabile di conteggio è inizialmente zero.
  • Quando si fa clic sul pulsante Incremento, il valore del conteggio viene incrementato di conseguenza come mostrato nell'immagine di output di seguito.

Cos'è la direttiva ng-show?

La direttiva ng-Show viene utilizzata per mostrare o nascondere un dato elemento HTML in base all'espressione fornita all'attributo ngShow. In background, l'elemento viene mostrato o nascosto rimuovendo o aggiungendo la classe CSS .ng-hide sull'elemento.

In background, l'elemento viene mostrato o nascosto rimuovendo o aggiungendo la classe CSS .ng-hide sull'elemento.

Diamo un'occhiata a un esempio di come possiamo usare la direttiva "ngshow event" per visualizzare un elemento nascosto.

Event Registration

Guru99 Global Event




Angular

Spiegazione del codice:

  1. Stiamo allegando la direttiva dell'evento ng-click all'elemento button. Qui stiamo facendo riferimento a una funzione chiamata "ShowHide" che è definita nel nostro controller - DemoController.
  2. Alleghiamo l'attributo ng-show a un tag div che contiene il testo Angular. Questo è il tag che mostreremo / nasconderemo in base all'attributo ng-show.

  3. Nel controller, stiamo collegando la variabile membro "IsVisible" all'oggetto scope. Questo attributo verrà passato all'attributo angolare ng-show (passaggio # 2) per controllare la visibilità del controllo div. Inizialmente lo stiamo impostando su false in modo che quando la pagina viene visualizzata per la prima volta il tag div sarà nascosto.

    Nota: - Quando gli attributi ng-show sono impostati su true, verrà mostrato all'utente il controllo successivo che nel nostro caso è il tag div. Quando l'attributo ng-show è impostato su false, il controllo verrà nascosto all'utente.

  4. Stiamo aggiungendo codice alla funzione ShowHide che imposterà la variabile membro IsVisible su true in modo che il tag div possa essere mostrato all'utente.

Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.

Uscita: 1

Dall'uscita,

  • Inizialmente puoi vedere che il tag div che ha il testo "AngularJS" non viene mostrato e questo perché l'oggetto isVisible scope è inizialmente impostato su false che viene successivamente passato alla direttiva ng-show del tag div.
  • Quando si fa clic sul pulsante "Mostra AngularJS", la variabile membro isVisible diventa vera e quindi il testo "Angular" diventa visibile all'utente. L'output di seguito verrà mostrato all'utente.

L'output ora mostra il tag div con il testo angolare.

Cos'è la direttiva ng-hide?

Con la direttiva ng-hide un elemento sarà nascosto se l'espressione è TRUE. Se l'espressione è FALSE verrà mostrato l'elemento. In background, l'elemento viene mostrato o nascosto rimuovendo o aggiungendo la classe CSS .ng-hide sull'elemento.

D'altra parte con ng-hide, l'elemento è nascosto se l'espressione è vera e verrà mostrato se è falsa.

Diamo un'occhiata all'esempio simile a quello mostrato per ngShow per mostrare come può essere utilizzato l'attributo ngHide.

Event Registration

Guru99 Global Event




Angular

Spiegazione del codice:

  1. Stiamo allegando la direttiva dell'evento ng-click all'elemento button. Qui stiamo facendo riferimento a una funzione chiamata ShowHide che è definita nel nostro controller: DemoController.
  2. Stiamo allegando l'attributo ng-hide a un tag div che contiene il testo Angular. Questo è il tag, che mostreremo / nasconderemo in base all'attributo ng-show.
  3. Nel controller, stiamo allegando la variabile membro isVisible all'oggetto scope. Questo attributo verrà passato all'attributo angular ng-show per controllare la visibilità del controllo div. Inizialmente lo stiamo impostando su false in modo che quando la pagina viene visualizzata per la prima volta il tag div sarà nascosto.
  4. Stiamo aggiungendo codice alla funzione ShowHide che imposterà la variabile membro IsVisible su true in modo che il tag div possa essere mostrato all'utente.

Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.

Produzione:

Dall'uscita,

  • Inizialmente puoi vedere che il tag div che ha il testo "AngularJs" viene inizialmente mostrato perché il valore della proprietà false viene inviato alla direttiva ng-hide.
  • Quando si fa clic sul pulsante "Nascondi angolare", il valore della proprietà true verrà inviato alla direttiva ng-hide. Quindi verrà mostrato l'output sottostante, in cui verrà nascosta la parola "Angular".

Direttive del listener di eventi AngularJS

Puoi aggiungere listener di eventi AngularJS ai tuoi elementi HTML utilizzando una o più di queste direttive:

  • ng-blur
  • ng-change
  • ng-clic
  • 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

Sommario

  • Le direttive sugli eventi vengono utilizzate in Angular per aggiungere codice personalizzato per rispondere agli eventi generati dall'intervento dell'utente come clic di pulsanti, clic di tastiera e mouse, ecc.
  • La direttiva degli eventi più comune è la direttiva ng-click che viene utilizzata per gestire gli eventi di clic. L'uso più comune di questo è per i clic sui pulsanti in cui è possibile aggiungere codice per rispondere a un clic del pulsante.
  • Gli elementi HTML possono anche essere nascosti o mostrati all'utente di conseguenza utilizzando gli attributi angolari ng-show e ng-hide.