Directive AngularJS ng-click, ng-show și ng-hide cu exemplu
Evenimente AngularJS
Evenimente AngularJS sunt funcționalitățile care permit aplicațiilor web să interacționeze cu intrările utilizatorului, cum ar fi clicul mouse-ului, intrările de la tastatură, trecerea mouse-ului, etc. Evenimentele trebuie gestionate în aplicații bazate pe web pentru a efectua sarcini și acțiuni specifice. Este declanșat atunci când o anumită acțiune este efectuată de către utilizator.
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, mișcări, apăsări de tastatură, evenimente de modificare etc.
AngularJS poate adăuga funcționalitate care poate fi folosită 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 butonul, putem folosi directiva de eveniment Angular ng-click.
Vom analiza în detaliu directivele de eveniment în timpul acestui curs.
Ce este directiva ng-click în AngularJS?
„directiva ng-click” în AngularJS este folosit pentru a aplica un comportament personalizat atunci când se face clic pe un element din HTML. Această directivă este utilizată în mod normal pentru butoane, deoarece acesta este cel mai obișnuit pentru adăugarea de evenimente care răspund la clicurile efectuate de utilizator. De asemenea, este folosit pentru a afișa alerte pop-up atunci când se face clic pe un buton.
Sintaxa ng-click în AngularJS
<element ng-click="expression"> </element>
Să vedem un exemplu simplu despre cum putem implementa evenimentul clic.
Exemplu de ng-click în AngularJS
În acest exemplu de ng-click, vom avea o variabilă contor care va crește în valoare atunci când utilizatorul face clic pe un buton.
<!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>
Explicația codului:
- Mai întâi folosim directiva ng-init pentru a seta valoarea unei variabile locale la 0.
- Introducem apoi directiva de eveniment ng-click la buton. În această directivă, scriem cod pentru a incrementa valoarea variabilei de numărare cu 1.
- Aici afișăm utilizatorului valoarea variabilei de numărare.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
Din rezultatul de mai sus,
- Putem vedea că butonul „Incrementare” este afișat și valoarea variabilei de numărare este inițial zero.
- Când faceți clic pe butonul Incrementare, valoarea numărului este incrementată în mod corespunzător, așa cum se arată în imaginea de ieșire de mai jos.
Ce este Directiva ng-show în AngularJS?
Directiva ng-Show în AngularJS este folosit pentru a afișa sau a ascunde un anumit specific HTML element bazat pe expresia furnizată atributului ng-show. În fundal, elementul HTML este afișat sau ascuns prin eliminarea sau adăugarea clasei CSS .ng-hide pe element. Este o clasă CSS predefinită care setează afișarea la niciunul.
Sintaxa lui ng-show în AngularJS
<element ng-show="expression"> </element>
În fundal, elementul este afișat sau ascuns prin eliminarea sau adăugarea clasei CSS .ng-hide pe element.
Exemplu de ng-show în AngularJS
Să ne uităm la un ng-show în Angular Exemplu despre cum putem folosi directiva „ngshow event” pentru a afișa un element ascuns.
<!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>
Explicația codului:
- Atașăm directiva de eveniment ng-click elementului buton. Aici ne referim la o funcție numită „ShowHide” care este definită în controlerul nostru – DemoController.
- Atașăm atributul ng-show unei etichete div care conține textul Angular. Aceasta este eticheta pe care o vom afișa/ascunde pe baza atributului ng-show.
- În controler, atașăm variabila membru „IsVisible” la obiectul scop. Acest atribut va fi transmis atributului unghiular ng-show (pasul #2) pentru a controla vizibilitatea controlului div. Inițial setăm acest lucru la false, 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 true, controlul ulterior, care în cazul nostru este eticheta div, va fi afișat utilizatorului. Când atributul ng-show este setat la false, controlul va fi ascuns utilizatorului.
- Adăugăm cod la funcția ShowHide, care va seta variabila membru IsVisible la true, astfel încât AngularJS show hide div on click tag să poată fi afișat utilizatorului.
Dacă codul pentru ng-show și ng-hide în AngularJS este executat cu succes, următoarea ieșire va fi afișată atunci 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 isVisible scope este inițial setat la false, care este apoi transmis directivei ng-show a etichetei div.
- Când faceți clic pe butonul „Afișați AngularJS”, acesta schimbă 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.
Rezultatul arată acum eticheta div cu textul Angular.
Ce este directiva ng-hide în AngularJS?
directiva ng-hide în AngularJS este o funcție prin care un element va fi ascuns dacă expresia este TRUE. 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.
Sintaxa lui ng-hide în AngularJS
<element ng-hide="expression"> </element>
Pe de altă parte, cu ng-hide, elementul este ascuns dacă expresia este adevărată și va fi afișat dacă este falsă.
Exemplu de ng-hide în AngularJS
Să ne uităm la exemplul ng-hide similar cu cel arătat pentru ngShow pentru a arăta cum pot fi utilizate atributele ng-hide și ng-show.
<!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>
Explicația codului:
- Atașăm directiva de eveniment ng-click elementului buton. Aici facem referire la o funcție numită ShowHide care este definită în controlerul nostru – DemoController.
- Atașăm atributul ng-hide la o etichetă div care conține textul Angular. Aceasta este eticheta, pe care o vom folosi pentru a afișa hide în Angular pe baza atributului ng-show.
- În controler, atașăm variabila membru isVisible la obiectul scope. Acest atribut va fi transmis atributului unghiular ng-show pentru a controla vizibilitatea controlului div. Inițial setăm acest lucru la false, astfel încât atunci când pagina este afișată pentru prima dată, eticheta div va fi ascunsă.
- Adăugăm cod la funcția ShowHide care va seta variabila membru IsVisible la true, astfel încât eticheta div să poată fi afișată utilizatorului.
Dacă codul pentru ng show hide 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 „Hide Angular”, valoarea proprietății true va fi trimisă directivei ng-hide. Prin urmare, va fi afișată rezultatul de mai jos, în care cuvântul „Angular” va fi ascuns.
Directive AngularJS pentru ascultarea evenimentelor
Puteți adăuga ascultători de evenimente AngularJS la elementele dvs. HTML utilizând unul sau mai multe dintre acestea instrucțiuni:
- ng-blur
- ng-schimbare
- ng-clic
- ng-copie
- ng-cut
- ng-dblclick
- ng-focalizare
- ng-keydown
- ng-apăsare taste
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-paste
Rezumat
- Directivele de evenimente sunt folosite în Angular pentru a adăuga cod personalizat pentru a răspunde la evenimente generate de intervenția utilizatorului, cum ar fi clicuri pe butoane, clicuri de la tastatură și mouse etc.
- Cea mai comună directivă de evenimente este directiva AngularJS ng-click, care este utilizată pentru a gestiona evenimentele de clic. Cea mai obișnuită utilizare a acesteia este pentru clic pe butoanele AngluarJS, în care se poate adăuga cod pentru a răspunde la un clic pe buton.
- Elementele HTML pot fi, de asemenea, ascunse sau afișate utilizatorului în consecință prin utilizarea Directiva AngularJS ng-show, Directiva unghiulară ng-hide și atributele ng-visible.