AngularJS események: ng-click, ng-show, ng-hide (példa)

Tartalomjegyzék:

Anonim

Webalapú alkalmazások létrehozásakor előbb vagy utóbb az alkalmazásának kezelnie kell a DOM eseményeket, például egérkattintásokat, mozdulatokat, billentyűzet megnyomásokat, események módosítását stb.

Az AngularJS olyan funkciókat adhat hozzá, amelyek felhasználhatók az ilyen események kezelésére.

Például, ha van egy gomb az oldalon, és valamit fel akar dolgozni, amikor a gombra kattint, használhatjuk az ng-click esemény direktívát.

A tanfolyam során részletesen megvizsgáljuk az Esemény irányelveket.

Ebben az oktatóanyagban megtanulja-

  • Mi az a ng-click irányelv?
  • Mi az ng-show irányelv?
  • Mi az a ng-hide irányelv?

Mi az a ng-click irányelv?

Az "ng-click direktíva" arra szolgál, hogy egyéni viselkedést alkalmazzon arra az esetre, amikor a HTML egyik elemére kattintott. Ezt általában gomboknál használják, mivel ez a leggyakoribb hely olyan események hozzáadásához, amelyek reagálnak a felhasználó által végrehajtott kattintásokra

Nézzünk meg egy egyszerű példát arra, hogyan tudjuk megvalósítani a kattintási eseményt.

Ebben a példában lesz egy számlálóváltozónk, amelynek értéke növekszik, amikor a felhasználó egy gombra kattint.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Kód Magyarázat:

  1. Először az ng-init direktívát használjuk a helyi változó számának 0-ra történő beállításához.
  2. Ezután bevezetjük a gombra az ng-click esemény direktívát. Ebben az irányelvben kódot írunk, hogy a számláló változó értékét 1-gyel növeljük.
  3. Itt a számláló változó értékét jelenítjük meg a felhasználó számára.

A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.

Kimenet:

A fenti kimenetből

  • Láthatjuk, hogy az "Increment" gomb jelenik meg, és a számláló változó értéke kezdetben nulla.
  • Amikor a Növekmény gombra kattint, a számlálás értéke ennek megfelelően növekszik, amint az az alábbi kimeneti képen látható.

Mi az ng-show irányelv?

Az ng-Show irányelv egy adott HTML elem megjelenítésére vagy elrejtésére szolgál az ngShow attribútumhoz adott kifejezés alapján. A háttérben az elem megjelenik vagy el van rejtve a .ng-hide CSS osztály eltávolításával vagy hozzáadásával az elemre.

A háttérben az elem megjelenik vagy el van rejtve a .ng-hide CSS osztály eltávolításával vagy hozzáadásával az elemre.

Nézzünk meg egy példát arra, hogyan használhatjuk az "ngshow event" irányelvet egy rejtett elem megjelenítéséhez.

Event Registration

Guru99 Global Event




Angular

Kód Magyarázat:

  1. Csatoljuk az ng-click esemény direktívát a gombelemhez. Itt hivatkozunk egy "ShowHide" nevű függvényre, amelyet a vezérlőnk - DemoController - definiál.
  2. Az ng-show attribútumot egy div taghez csatoljuk, amely az Angular szöveget tartalmazza. Ezt a címkét fogjuk megmutatni / elrejteni az ng-show attribútum alapján.

  3. A vezérlőben az "IsVisible" tag változót csatoljuk a hatókör objektumhoz. Ezt az attribútumot továbbítjuk az ng-show angular attribútumnak (2. lépés) a div vezérlő láthatóságának szabályozására. Eleinte hamisra állítottuk, hogy az oldal első megjelenésekor a div tag el legyen rejtve.

    Megjegyzés: - Ha az ng-show attribútumok értéke true, a későbbi vezérlő, amely esetünkben a div tag, megjelenik a felhasználó számára. Ha az ng-show attribútum értéke hamis, a vezérlő el lesz rejtve a felhasználó elől.

  4. Kódot adunk a ShowHide függvényhez, amely az IsVisible tag változót igazra állítja, így a div tag megjeleníthető a felhasználó számára.

A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.

Kimenet: 1

A kimenetből

  • Kezdetben láthatja, hogy az "AngularJS" szöveget tartalmazó div címke nem jelenik meg, és ez azért van, mert az isVisible hatókör objektumot eredetileg hamisra állítja, majd ezt követően továbbítja a div tag ng-show irányelvének.
  • Ha rákattint a "Show AngularJS" gombra, az isVisible tag változó igazivá válik, és így az "Angular" szöveg láthatóvá válik a felhasználó számára. Az alábbi kimenet megjelenik a felhasználó számára.

A kimeneten most a div tag látható az Angular szöveggel.

Mi az a ng-hide irányelv?

Az ng-hide direktívával egy elem el lesz rejtve, ha a kifejezés IGAZ. Ha a kifejezés HAMIS, akkor az elem megjelenik. A háttérben az elem megjelenik vagy el van rejtve a .ng-hide CSS osztály eltávolításával vagy hozzáadásával az elemre.

Másrészt az ng-hide esetén az elem rejtve van, ha a kifejezés igaz, és akkor jelenik meg, ha hamis.

Nézzük meg az ngShow esetében bemutatott példát, hogy bemutassuk, hogyan használható az ngHide attribútum.

Event Registration

Guru99 Global Event




Angular

Kód Magyarázat:

  1. Csatoljuk az ng-click esemény direktívát a gombelemhez. Itt a ShowHide nevű függvényre hivatkozunk, amelyet a vezérlőnk - a DemoController - definiál.
  2. Az ng-hide attribútumot egy div taghez csatoljuk, amely az Angular szöveget tartalmazza. Ez az a címke, amelyet az ng-show attribútum alapján meg fogunk mutatni / elrejteni.
  3. A vezérlőben az isVisible tag változót csatoljuk a hatókör objektumhoz. Ezt az attribútumot továbbítjuk az ng-show angular attribútumnak, hogy ellenőrizzük a div vezérlő láthatóságát. Eleinte hamisra állítottuk, hogy az oldal első megjelenésekor a div tag el legyen rejtve.
  4. Kódot adunk a ShowHide függvényhez, amely az IsVisible tag változót igazra állítja, így a div tag megjeleníthető a felhasználó számára.

A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.

Kimenet:

A kimenetből

  • Kezdetben láthatja, hogy az "AngularJs" szöveget tartalmazó div címke kezdetben megjelenik, mert a false tulajdonságértékét elküldi az ng-hide irányelvnek.
  • Amikor rákattintunk a "Szög elrejtése" gombra, a true will tulajdonságértéke el lesz küldve az ng-hide irányelvnek. Ezért az alábbi kimenet jelenik meg, amelyben a "Szögletes" szó el lesz rejtve.

AngularJS eseményfigyelő irányelvek

Az alábbi irányelvek közül egyet vagy többet használva hozzáadhatja az AngularJS eseményhallgatókat a HTML-elemeihez:

  • ng-elmosódás
  • ng-változás
  • ng kattintás
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-fókusz
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousownown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

Összegzés

  • Az Események irányelveket Angular-ban használjuk egyedi kód hozzáadásához, hogy válaszolhassunk a felhasználói beavatkozások által generált eseményekre, például a gombokra, a billentyűzetre és az egérre kattintással.
  • A leggyakoribb esemény irányelv az ng-click irányelv, amelyet a click események kezelésére használnak. Ennek leggyakoribb használata a gombokra történő kattintás, ahol kódot lehet hozzáadni, hogy válaszoljon egy gombnyomásra.
  • A HTML elemeket az ng-show és ng-hide szögletes attribútumok használatával is el lehet rejteni vagy ennek megfelelően megmutatni a felhasználó számára.