Evenimente AngularJS: ng-click, ng-show, ng-hide (Exemplu)

Cuprins:

Anonim

Când creați aplicații bazate pe web, mai devreme sau mai târziu, aplicația dvs. va trebui să gestioneze evenimente DOM, cum ar fi clicuri de mouse, mutări, apăsări de la tastatură, schimbarea evenimentelor etc.

AngularJS poate adăuga funcționalități care pot fi utilizate pentru a gestiona astfel de evenimente.

De exemplu, dacă există un buton pe pagină și doriți să procesați ceva când se face clic pe buton, putem folosi directiva eveniment ng-click.

Vom analiza în detaliu directivele evenimentului în timpul acestui curs.

În acest tutorial, veți învăța-

  • Ce este directiva ng-click?
  • Ce este directiva ng-show?
  • Ce este directiva ng-hide?

Ce este directiva ng-click?

„Directiva privind ng-clic“ este utilizat pentru a aplica un comportament personalizat atunci când un element HTML dat clic. Acest lucru este utilizat în mod normal pentru butoane, deoarece acesta este cel mai frecvent loc pentru adăugarea de evenimente care răspund la clicurile efectuate de utilizator

Să aruncăm un exemplu simplu despre cum putem implementa evenimentul de clic.

În acest exemplu, vom avea o variabilă de contor care va crește în valoare atunci când utilizatorul face clic pe un buton.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Explicatie cod:

  1. Mai întâi folosim directiva ng-init pentru a seta valoarea unui număr de variabile locale la 0.
  2. Apoi introducem directiva eveniment ng-click la buton. În această directivă, scriem cod pentru a crește valoarea variabilei de numărare cu 1.
  3. Aici afișăm utilizatorului valoarea variabilei de numărare.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.

Ieșire:

Din rezultatul de mai sus,

  • Putem vedea că butonul „Increment” este afișat și valoarea variabilei de numărare este inițial zero.
  • Când faceți clic pe butonul Incrementare, valoarea numărării este mărită corespunzător, așa cum se arată în imaginea de ieșire de mai jos.

Ce este directiva ng-show?

Directiva ng-Show este utilizată pentru a afișa sau ascunde un anumit element HTML pe baza expresiei furnizate atributului ngShow. În fundal, elementul este afișat sau ascuns prin eliminarea sau adăugarea clasei CSS .ng-hide pe element.

În fundal, elementul este afișat sau ascuns prin eliminarea sau adăugarea clasei CSS .ng-hide pe element.

Să vedem un exemplu despre modul în care putem folosi directiva „eveniment ngshow” pentru a afișa un element ascuns.

Event Registration

Guru99 Global Event




Angular

Explicatie cod:

  1. Atasăm directiva evenimentului ng-click la elementul buton. Aici facem referire la o funcție numită „Show ascunde” care este definită în controlerul nostru - DemoController.
  2. Atasăm atributul ng-show la o etichetă div care conține textul Angular. Aceasta este eticheta pe care o vom afișa / ascunde pe baza atributului ng-show.

  3. În controler, atașăm variabila membru „IsVisible” la obiectul scop. Acest atribut va fi trecut la atributul unghiular ng-show (pasul 2) pentru a controla vizibilitatea controlului div. Setăm inițial acest lucru ca fiind fals, astfel încât atunci când pagina este afișată pentru prima dată, eticheta div va fi ascunsă.

    Notă: - Când atributele ng-show sunt setate la adevărat, controlul ulterior care în cazul nostru este eticheta div va fi afișat utilizatorului. Când atributul ng-show este setat la fals, controlul va fi ascuns utilizatorului.

  4. Adăugăm cod la funcția Show ascunde, care va seta variabila membru IsVisible la true, astfel încât eticheta div să poată fi afișată utilizatorului.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.

Ieșire: 1

Din ieșire,

  • Puteți vedea inițial că eticheta div care are textul „AngularJS” nu este afișată și acest lucru se datorează faptului că obiectul de scop isVisible este setat inițial la fals, care este apoi trecut la directiva ng-show a etichetei div.
  • Când faceți clic pe butonul „Afișați AngularJS”, acesta modifică variabila membru isVisible pentru a deveni adevărat și, prin urmare, textul „Angular” devine vizibil pentru utilizator. Ieșirea de mai jos va fi afișată utilizatorului.

Ieșirea arată acum eticheta div cu textul unghiular.

Ce este directiva ng-hide?

Cu directiva ng-hide un element va fi ascuns dacă expresia este ADEVĂRATĂ. Dacă Expresia este FALSĂ, elementul va fi afișat. În fundal, elementul este afișat sau ascuns prin eliminarea sau adăugarea clasei CSS .ng-hide pe element.

Pe de altă parte, cu ng-hide, elementul este ascuns dacă expresia este adevărată și va fi afișat dacă este falsă.

Să vedem exemplul similar cu cel prezentat pentru ngShow pentru a prezenta modul în care poate fi utilizat atributul ngHide.

Event Registration

Guru99 Global Event




Angular

Explicatie cod:

  1. Atasăm directiva evenimentului ng-click la elementul buton. Aici facem referire la o funcție numită ShowHide care este definită în controlerul nostru - DemoController.
  2. Atasăm atributul ng-hide la o etichetă div care conține textul Angular. Aceasta este eticheta pe care o vom afișa / ascunde pe baza atributului ng-show.
  3. În controler, atașăm variabila membru isVisible la obiectul scop. Acest atribut va fi trecut la atributul unghiular ng-show pentru a controla vizibilitatea controlului div. Setăm inițial acest lucru ca fiind fals, astfel încât atunci când pagina este afișată pentru prima dată, eticheta div va fi ascunsă.
  4. Adăugăm cod la funcția Show ascunde, care va seta variabila membru IsVisible la true, astfel încât eticheta div să poată fi afișată utilizatorului.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.

Ieșire:

Din ieșire,

  • Puteți vedea inițial că eticheta div care are textul „AngularJs” este afișată inițial, deoarece valoarea proprietății false este trimisă directivei ng-hide.
  • Când facem clic pe butonul „Ascunde unghiular”, valoarea proprietății true va fi trimisă directivei ng-hide. Prin urmare, va fi afișat rezultatul de mai jos, în care cuvântul "unghiular" va fi ascuns.

Directivele de ascultare a evenimentelor AngularJS

Puteți adăuga ascultători de evenimente AngularJS la elementele HTML folosind una sau mai multe dintre aceste directive:

  • ng-blur
  • ng-schimbare
  • faceți 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

rezumat

  • Directivele privind evenimentele sunt utilizate în Angular pentru a adăuga cod personalizat pentru a răspunde la evenimentele generate de intervenția utilizatorului, cum ar fi clicurile pe butoane, clicurile de pe tastatură și mouse etc.
  • Cea mai comună directivă de evenimente este directiva ng-click care este utilizată pentru gestionarea evenimentelor de clic. Cea mai obișnuită utilizare a acestui lucru este pentru clicurile pe butoane în care codul poate fi adăugat pentru a răspunde la un clic pe buton.
  • Elementele HTML pot fi, de asemenea, ascunse sau afișate utilizatorului în consecință, utilizând atributele unghiulare ng-show și ng-hide.