AngularJS Events: ng-click, ng-show, ng-hide (voorbeeld)

Inhoudsopgave:

Anonim

Wanneer u webgebaseerde applicaties maakt, moet uw applicatie vroeg of laat DOM-gebeurtenissen verwerken, zoals muisklikken, bewegingen, toetsenbordaanslagen, wijzigingsgebeurtenissen, enz.

AngularJS kan functionaliteit toevoegen die kan worden gebruikt om dergelijke gebeurtenissen af ​​te handelen.

Als er bijvoorbeeld een knop op de pagina staat en u wilt iets verwerken wanneer op de knop wordt geklikt, kunnen we de ng-click event-instructie gebruiken.

Tijdens deze cursus gaan we uitgebreid in op Event richtlijnen.

In deze tutorial leer je-

  • Wat is een ng-click-richtlijn?
  • Wat is de ng-show-richtlijn?
  • Wat is de ng-hide-richtlijn?

Wat is een ng-click-richtlijn?

De "ng-click-instructie" wordt gebruikt om aangepast gedrag toe te passen wanneer een element in HTML klikt. Dit wordt normaal gesproken gebruikt voor knoppen, omdat dat de meest gebruikelijke plaats is voor het toevoegen van gebeurtenissen die reageren op klikken die door de gebruiker worden uitgevoerd

Laten we een eenvoudig voorbeeld bekijken van hoe we de klikgebeurtenis kunnen implementeren.

In dit voorbeeld hebben we een tellervariabele die in waarde toeneemt wanneer de gebruiker op een knop klikt.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Code Verklaring:

  1. We gebruiken eerst de richtlijn ng-init om de waarde van een lokale variabele count op 0 te zetten.
  2. We introduceren dan de ng-click-gebeurtenisrichtlijn op de knop. In deze richtlijn schrijven we code om de waarde van de count-variabele met 1 te verhogen.
  3. Hier tonen we de waarde van de count-variabele aan de gebruiker.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Van de bovenstaande output,

  • We kunnen zien dat de knop "Verhogen" wordt weergegeven en dat de waarde van de telvariabele aanvankelijk nul is.
  • Wanneer u op de knop Verhogen klikt, wordt de waarde van de telling dienovereenkomstig verhoogd, zoals weergegeven in de onderstaande uitvoerafbeelding.

Wat is de ng-show-richtlijn?

ng-Show-instructie wordt gebruikt om een ​​bepaald HTML-element weer te geven of te verbergen op basis van de uitdrukking die aan het kenmerk ngShow is verstrekt. Op de achtergrond wordt het element getoond of verborgen door de CSS-klasse .ng-hide te verwijderen of aan het element toe te voegen.

Op de achtergrond wordt het element getoond of verborgen door de CSS-klasse .ng-hide te verwijderen of aan het element toe te voegen.

Laten we eens kijken naar een voorbeeld van hoe we de "ngshow event" -richtlijn kunnen gebruiken om een ​​verborgen element weer te geven.

Event Registration

Guru99 Global Event




Angular

Code Verklaring:

  1. We koppelen de gebeurtenisrichtlijn ng-click aan het knopelement. Hier verwijzen we naar een functie genaamd "ShowHide" die is gedefinieerd in onze controller - DemoController.
  2. We koppelen het kenmerk ng-show aan een div-tag die de tekst Angular bevat. Dit is de tag die we gaan tonen / verbergen op basis van het kenmerk ng-show.

  3. In de controller koppelen we de "IsVisible" -lidvariabele aan het scope-object. Dit kenmerk wordt doorgegeven aan het angular-kenmerk ng-show (stap # 2) om de zichtbaarheid van het div-besturingselement te regelen. We stellen dit in eerste instantie in op false, zodat wanneer de pagina voor het eerst wordt weergegeven, de div-tag wordt verborgen.

    Opmerking: - Als de attributen ng-show is ingesteld op true, wordt het volgende besturingselement, in ons geval de div-tag, aan de gebruiker getoond. Als het kenmerk ng-show is ingesteld op false, wordt het besturingselement verborgen voor de gebruiker.

  4. We voegen code toe aan de ShowHide-functie die de lidvariabele IsVisible op true zet, zodat de div-tag aan de gebruiker kan worden getoond.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang: 1

Van de output,

  • U kunt in eerste instantie zien dat de div-tag met de tekst "AngularJS" niet wordt weergegeven en dit komt omdat het isVisible scope-object aanvankelijk is ingesteld op false, die vervolgens wordt doorgegeven aan de ng-show-instructie van de div-tag.
  • Wanneer u op de knop "AngularJS weergeven" klikt, verandert de lidvariabele isVisible in true en wordt de tekst "Angular" zichtbaar voor de gebruiker. De onderstaande uitvoer wordt aan de gebruiker getoond.

De uitvoer toont nu de div-tag met de Angular-tekst.

Wat is de ng-hide-richtlijn?

Met de instructie ng-hide wordt een element verborgen als de uitdrukking WAAR is. Als de uitdrukking FALSE is, wordt het element weergegeven. Op de achtergrond wordt het element getoond of verborgen door de CSS-klasse .ng-hide te verwijderen of aan het element toe te voegen.

Aan de andere kant, met ng-hide, is het element verborgen als de uitdrukking waar is en wordt het weergegeven als het onwaar is.

Laten we eens kijken naar het voorbeeld dat vergelijkbaar is met het voorbeeld dat wordt getoond voor ngShow om te laten zien hoe het kenmerk ngHide kan worden gebruikt.

Event Registration

Guru99 Global Event




Angular

Code Verklaring:

  1. We koppelen de gebeurtenisrichtlijn ng-click aan het knopelement. Hier verwijzen we naar een functie genaamd ShowHide die is gedefinieerd in onze controller - DemoController.
  2. We koppelen het kenmerk ng-hide aan een div-tag die de tekst Angular bevat. Dit is de tag die we gaan tonen / verbergen op basis van het kenmerk ng-show.
  3. In de controller koppelen we de lidvariabele isVisible aan het scope-object. Dit kenmerk wordt doorgegeven aan het angular-kenmerk ng-show om de zichtbaarheid van de div-besturing te regelen. We stellen dit in eerste instantie in op false, zodat wanneer de pagina voor het eerst wordt weergegeven, de div-tag wordt verborgen.
  4. We voegen code toe aan de ShowHide-functie die de lidvariabele IsVisible op true zet, zodat de div-tag aan de gebruiker kan worden getoond.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Van de output,

  • U kunt aanvankelijk zien dat de div-tag met de tekst "AngularJs" aanvankelijk wordt weergegeven omdat de eigenschapswaarde false naar de instructie ng-hide wordt verzonden.
  • Als we op de knop "Hoek verbergen" klikken, wordt de eigenschapswaarde true naar de instructie ng-hide gestuurd. Daarom wordt de onderstaande uitvoer getoond, waarin het woord "Angular" wordt verborgen.

AngularJS Event Listener-richtlijnen

U kunt AngularJS-gebeurtenislisteners aan uw HTML-elementen toevoegen door een of meer van deze richtlijnen te gebruiken:

  • ng-vervaging
  • ng-verandering
  • ng-klik
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-toetsaanslag
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-plakken

Overzicht

  • Gebeurtenisrichtlijnen worden gebruikt in Angular om aangepaste code toe te voegen om te reageren op gebeurtenissen die worden gegenereerd door gebruikersinterventie, zoals klikken op knoppen, toetsenbord- en muisklikken, enz.
  • De meest voorkomende gebeurtenisrichtlijn is de ng-click-richtlijn die wordt gebruikt om klikgebeurtenissen af ​​te handelen. Het meest voorkomende gebruik hiervan is voor het klikken op een knop, waarbij code kan worden toegevoegd om te reageren op een klik op een knop.
  • HTML-elementen kunnen dienovereenkomstig ook worden verborgen of aan de gebruiker worden getoond door de angular attributen ng-show en ng-hide te gebruiken.