AngularJS-begivenheder: ng-klik, ng-show, ng-skjul (eksempel)

Indholdsfortegnelse:

Anonim

Når du opretter webbaserede applikationer, skal din applikation før eller senere håndtere DOM-begivenheder som museklik, bevægelser, tastaturtryk, skifte begivenheder osv.

AngularJS kan tilføje funktionalitet, der kan bruges til at håndtere sådanne begivenheder.

For eksempel, hvis der er en knap på siden, og du vil behandle noget, når der klikkes på knappen, kan vi bruge ng-click-hændelsesdirektivet.

Vi vil se nærmere på begivenhedsdirektiver i løbet af dette kursus.

I denne vejledning lærer du-

  • Hvad er ng-click-direktivet?
  • Hvad er ng-show-direktivet?
  • Hvad er ng-hide-direktivet?

Hvad er ng-click-direktivet?

Den "ng klik direktivet" bruges til at anvende brugerdefinerede adfærd til når et element i HTML klikket på. Dette bruges normalt til knapper, fordi det er det mest almindelige sted at tilføje begivenheder, der reagerer på klik udført af brugeren

Lad os se på et simpelt eksempel på, hvordan vi kan implementere klikhændelsen.

I dette eksempel vil vi have en tællervariabel, der øges i værdi, når brugeren klikker på en knap.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Kode Forklaring:

  1. Vi bruger først ng-init-direktivet til at indstille værdien af ​​et antal lokale variabler til 0.
  2. Vi introducerer derefter ng-click-direktivet til knappen. I dette direktiv skriver vi kode for at øge værdien af ​​tællingsvariablen med 1.
  3. Her viser vi værdien af ​​tællingsvariablen for brugeren.

Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.

Produktion:

Fra ovenstående output,

  • Vi kan se, at knappen "Forøgelse" vises, og værdien af ​​tællevariablen oprindeligt er nul.
  • Når du klikker på knappen Forøgelse, øges værdien af ​​optællingen i overensstemmelse hermed som vist i outputbilledet nedenfor.

Hvad er ng-show-direktivet?

ng-Show-direktivet bruges til at vise eller skjule et givet HTML-element baseret på det udtryk, der gives til ngShow-attributten. I baggrunden vises eller skjules elementet ved at fjerne eller tilføje .ng-skjul CSS-klassen til elementet.

I baggrunden vises eller skjules elementet ved at fjerne eller tilføje .ng-skjul CSS-klassen til elementet.

Lad os se på et eksempel på, hvordan vi kan bruge direktivet "ngshow event" til at vise et skjult element.

Event Registration

Guru99 Global Event




Angular

Kode Forklaring:

  1. Vi vedhæfter ng-click-hændelsesdirektivet til knapelementet. Her henviser vi til en funktion kaldet "ShowHide", der er defineret i vores controller - DemoController.
  2. Vi vedhæfter ng-show-attributten til et div-tag, der indeholder teksten Angular. Dette er mærket, som vi skal vise / skjule baseret på attributten ng-show.

  3. I controlleren vedhæfter vi "IsVisible" medlemsvariablen til omfangsobjektet. Denne attribut sendes til ng-show-vinkelattributten (trin 2) for at kontrollere synligheden af ​​div-kontrollen. Vi indstiller oprindeligt dette til falsk, så når div-siden først vises, vil div-koden blive skjult.

    Bemærk: - Når attributterne ng-show er indstillet til true, vises den efterfølgende kontrol, som i vores tilfælde er div-taggen, for brugeren. Når attributten ng-show er sat til falsk, skjules kontrollen for brugeren.

  4. Vi tilføjer kode til ShowHide-funktionen, som sætter IsVisible-medlemsvariablen til sand, så div-tagget kan vises til brugeren.

Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.

Output: 1

Fra output,

  • Du kan oprindeligt se, at div-tagget, der har teksten "AngularJS", ikke vises, og dette skyldes, at isVisible scope-objektet oprindeligt er sat til false, som derefter efterfølgende sendes til ng-show-direktivet for div-taggen.
  • Når du klikker på "Vis AngularJS" -knappen, ændres den isVisible medlemsvariabel til at blive sand og dermed bliver teksten "Angular" synlig for brugeren. Nedenstående output vises til brugeren.

Outputtet viser nu div-koden med den kantede tekst.

Hvad er ng-hide-direktivet?

Med ng-hide-direktivet skjules et element, hvis udtrykket er SAND. Hvis udtrykket er FALSK, vises elementet. I baggrunden vises eller skjules elementet ved at fjerne eller tilføje .ng-skjul CSS-klassen til elementet.

På den anden side med ng-skjul, er elementet skjult, hvis udtrykket er sandt, og det vil blive vist, hvis det er falsk.

Lad os se på det lignende eksempel som det, der vises for ngShow, for at vise, hvordan ngHide-attributten kan bruges.

Event Registration

Guru99 Global Event




Angular

Kode Forklaring:

  1. Vi vedhæfter ng-click-hændelsesdirektivet til knapelementet. Her henviser vi til en funktion kaldet ShowHide, der er defineret i vores controller - DemoController.
  2. Vi vedhæfter attributten ng-hide til et div-tag, der indeholder teksten Angular. Dette er mærket, som vi skal vise / skjule baseret på attributten ng-show.
  3. I controlleren vedhæfter vi isVisible-medlemsvariablen til omfangsobjektet. Denne attribut sendes til ng-show-vinkelattributten for at kontrollere synligheden af ​​div-kontrollen. Vi indstiller oprindeligt dette til falsk, så når div-siden først vises, vil div-koden blive skjult.
  4. Vi tilføjer kode til ShowHide-funktionen, som sætter IsVisible-medlemsvariablen til sand, så div-tagget kan vises til brugeren.

Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.

Produktion:

Fra output,

  • Du kan oprindeligt se, at div-koden, der har teksten "AngularJs", oprindeligt vises, fordi egenskabsværdien for false sendes til ng-hide-direktivet.
  • Når vi klikker på "Skjul kantet" -knappen, sendes ejendomsværdien af ​​true til ng-hide-direktivet. Derfor vil nedenstående output blive vist, hvor ordet "Angular" vil være skjult.

AngularJS begivenhedslytteredirektiver

Du kan tilføje AngularJS begivenhedslyttere til dine HTML-elementer ved hjælp af et eller flere af disse direktiver:

  • ng-sløring
  • ng-forandring
  • ng-klik
  • ng-kopi
  • ng-cut
  • ng-dblklik
  • ng-fokus
  • ng-keydown
  • ng-tastetryk
  • ng-keyup
  • ng-mousedown
  • ng-musen
  • ng-mouseleave
  • ng-musemove
  • ng-musemarkering
  • ng-mouseup
  • ng-indsæt

Resumé

  • Hændelsesdirektiver bruges i Angular til at tilføje brugerdefineret kode for at svare på begivenheder, der genereres af brugerintervention, såsom knap klik, tastatur og museklik osv.
  • Det mest almindelige begivenhedsdirektiv er ng-klik-direktivet, der bruges til at håndtere klikhændelser. Den mest almindelige anvendelse af dette er for klik på knapper, hvor kode kan tilføjes for at svare på et knap-klik.
  • HTML-elementer kan også skjules eller vises til brugeren i overensstemmelse hermed ved hjælp af ng-show og ng-hide vinkelattributter.