AngularJS-händelser: ng-klick, ng-show, ng-hide (exempel)

Innehållsförteckning:

Anonim

När du skapar webbaserade applikationer kommer din applikation förr eller senare att behöva hantera DOM-händelser som musklick, rörelser, tangentbordstryck, ändra händelser etc.

AngularJS kan lägga till funktioner som kan användas för att hantera sådana händelser.

Om det till exempel finns en knapp på sidan och du vill bearbeta något när du klickar på knappen kan vi använda ng-click-händelsedirektivet.

Vi kommer att undersöka eventdirektiven i detalj under denna kurs.

I den här handledningen lär du dig-

  • Vad är ng-click-direktivet?
  • Vad är ng-show-direktivet?
  • Vad är ng-hide-direktivet?

Vad är ng-click-direktivet?

Den "NG-klick-direktivet" används för att applicera anpassade beteende när ett element i HTML klickade. Detta används normalt för knappar eftersom det är den vanligaste platsen för att lägga till händelser som svarar på klick som utförs av användaren

Låt oss titta på ett enkelt exempel på hur vi kan implementera klickhändelsen.

I det här exemplet kommer vi att ha en motvariabel som ökar i värde när användaren klickar på en knapp.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Kodförklaring:

  1. Vi använder först ng-init-direktivet för att ställa in värdet på en lokal variabelräkning till 0.
  2. Vi introducerar sedan ng-click-händelsedirektivet till knappen. I detta direktiv skriver vi kod för att öka värdet på räknevariabeln med 1.
  3. Här visar vi värdet på räknevariabeln för användaren.

Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

Från ovanstående utdata,

  • Vi kan se att knappen "Increment" visas och att värdet på räkna variabeln initialt är noll.
  • När du klickar på Inkrement-knappen ökas värdet på räkningen i enlighet med det som visas i utmatningsbilden nedan.

Vad är ng-show-direktivet?

ng-Show-direktivet används för att visa eller dölja ett visst HTML-element baserat på det uttryck som ges till attributet ngShow. I bakgrunden visas eller döljs elementet genom att ta bort eller lägga till .ng-hide CSS-klassen på elementet.

I bakgrunden visas eller döljs elementet genom att ta bort eller lägga till .ng-hide CSS-klassen på elementet.

Låt oss titta på ett exempel på hur vi kan använda direktivet "ngshow event" för att visa ett dolt element.

Event Registration

Guru99 Global Event




Angular

Kodförklaring:

  1. Vi bifogar ng-click-händelsedirektivet till knappelementet. Här refererar vi till en funktion som heter "ShowHide" som definieras i vår controller - DemoController.
  2. Vi bifogar attributet ng-show till en div-tagg som innehåller texten Angular. Det här är taggen som vi ska visa / dölja baserat på attributet ng-show.

  3. I styrenheten bifogar vi "IsVisible" -medelsvariabeln till scope-objektet. Detta attribut skickas till vinkelattributet ng-show (steg 2) för att kontrollera synligheten för div-kontrollen. Vi sätter inledningsvis detta till falskt så att när sidan först visas div-taggen kommer att döljas.

    Obs: - När attributen ng-show är satt till true visas den efterföljande kontrollen som i vårt fall är div-taggen för användaren. När attributet ng-show är inställt på falskt döljs kontrollen för användaren.

  4. Vi lägger till kod i ShowHide-funktionen som ställer in IsVisible-medlemsvariabeln till true så att div-taggen kan visas för användaren.

Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.

Utgång: 1

Från produktionen,

  • Du kan initialt se att div-taggen som har texten "AngularJS" inte visas och detta beror på att isVisible scope-objektet initialt är satt till false som sedan skickas till div-taggens ng-show-direktiv.
  • När du klickar på "Visa AngularJS" -knappen, ändras den isVisible medlemsvariabeln så att den blir sant och följaktligen blir texten "Angular" synlig för användaren. Nedanstående utdata visas för användaren.

Utdata visar nu div-taggen med den vinklade texten.

Vad är ng-hide-direktivet?

Med ng-hide-direktivet kommer ett element att döljas om uttrycket är SANT. Om uttrycket är FALSKT visas elementet. I bakgrunden visas eller döljs elementet genom att ta bort eller lägga till .ng-hide CSS-klassen på elementet.

Å andra sidan med ng-hide är elementet dolt om uttrycket är sant och det kommer att visas om det är falskt.

Låt oss titta på det liknande exemplet som det som visas för ngShow för att visa hur ngHide-attributet kan användas.

Event Registration

Guru99 Global Event




Angular

Kodförklaring:

  1. Vi bifogar ng-click-händelsedirektivet till knappelementet. Häri refererar vi till en funktion som heter ShowHide som definieras i vår controller - DemoController.
  2. Vi bifogar attributet ng-hide till en div-tagg som innehåller texten Angular. Det här är taggen som vi ska visa / dölja baserat på attributet ng-show.
  3. I kontrollen bifogar vi isVisible-medlemsvariabeln till scope-objektet. Detta attribut skickas till vinkelattributet ng-show för att styra div-kontrollens synlighet. Vi sätter inledningsvis detta till falskt så att när sidan först visas div-taggen kommer att döljas.
  4. Vi lägger till kod i ShowHide-funktionen som ställer in IsVisible-medlemsvariabeln till true så att div-taggen kan visas för användaren.

Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

Från produktionen,

  • Du kan initialt se att div-taggen som har texten "AngularJs" ursprungligen visas eftersom egenskapens värde för false skickas till ng-hide-direktivet.
  • När vi klickar på "Hide Angular" -knappen skickas egenskapens värde för true till ng-hide-direktivet. Följaktligen visas nedanstående utgång, där ordet "Vinkel" kommer att döljas.

AngularJS Event Listener Directives

Du kan lägga till AngularJS-evenemangslyssnare i dina HTML-element genom att använda ett eller flera av dessa direktiv:

  • ng-oskärpa
  • ng-förändring
  • ng-klicka
  • ng-kopia
  • ng-cut
  • ng-dblklicka
  • ng-fokus
  • ng-keydown
  • ng-tangenttryckning
  • ng-keyup
  • ng-mousedown
  • ng-musen
  • ng-mouseleave
  • ng-mousemove
  • ng-musöverföring
  • ng-mouseup
  • ng-klistra in

Sammanfattning

  • Händelsedirektiv används i Angular för att lägga till anpassad kod för att svara på händelser som genereras av användarinterventioner såsom knappklick, tangentbord och musklick etc.
  • Det vanligaste händelsedirektivet är ng-klickdirektivet som används för att hantera klickhändelser. Den vanligaste användningen av detta är för knappklick där kod kan läggas till för att svara på ett knappklick.
  • HTML-element kan också döljas eller visas för användaren i enlighet med detta genom att använda vinkelattributen ng-show och ng-hide.