AngularJS ng-click, ng-show és ng-hide direktívák példával
James Hartman
AngularJS események
AngularJS események azok a funkciók, amelyek lehetővé teszik a webalkalmazások számára, hogy interakcióba lépjenek a felhasználói bevitelekkel, például egérkattintással, billentyűzetbevitellel, egérmutatóval stb. Az eseményeket webalapú alkalmazásokban kell kezelni bizonyos feladatok és műveletek végrehajtásához. Akkor aktiválódik, amikor a felhasználó egy adott műveletet hajt végre.
Webalapú alkalmazások létrehozásakor előbb-utóbb az alkalmazásnak kezelnie kell a DOM-eseményeket, például az egérkattintásokat, a mozdulatokat, a billentyűzet lenyomását, a változási eseményeket stb.
AngularJS olyan funkciókat adhat hozzá, amelyek az ilyen események kezelésére használhatók.
Például, ha van egy gomb az oldalon, és a gombra kattintva szeretne valamit feldolgozni, használhatjuk az Angular ng-click esemény direktívát.
Ezen a tanfolyamon részletesen megvizsgáljuk az Esemény irányelveket.
Mi az ng-click irányelv az AngularJS-ben?
A "ng-click direktíva" Az AngularJS-ben az egyéni viselkedés alkalmazására szolgál, amikor egy HTML-elemre kattintanak. Ezt az utasítást általában a gombokhoz használják, mert ez a legáltalánosabb a felhasználó által végrehajtott kattintásokra reagáló események hozzáadására. Arra is használatos, hogy felugró riasztásokat jelenítsen meg, ha egy gombra kattintanak.
Az ng-click szintaxisa az AngularJS-ben
<element ng-click="expression"> </element>
Nézzünk egy egyszerű példát arra, hogyan valósíthatjuk meg a kattintási eseményt.
Példa az ng-clickre az AngularJS-ben
Ebben az ng-click példában van egy számlálóváltozónk, amelynek értéke növekszik, ha a felhasználó egy gombra kattint.
<!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>
Kód magyarázata:
- Először az ng-init direktívát használjuk, hogy egy lokális változószám értékét 0-ra állítsuk.
- Ezután bevezetjük a gombhoz az ng-click esemény direktívát. Ebben az irányelvben kódot írunk a count változó értékének 1-gyel történő növelésére.
- Itt a count változó értékét jelenítjük meg a felhasználó számára.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A fenti kimenetből
- Láthatjuk, hogy megjelenik az „Inkrement” gomb, és a számláló változó értéke kezdetben nulla.
- Ha a Növelés gombra kattint, a számláló értéke ennek megfelelően növekszik, ahogy az alábbi kimeneti képen látható.
Mi az ng-show irányelv az AngularJS-ben?
A ng-Show direktíva Az AngularJS-ben egy adott konkrét megjelenítésére vagy elrejtésére szolgál HTML elemet az ng-show attribútumhoz megadott kifejezés alapján. A háttérben a HTML-elem megjelenik vagy elrejthető az .ng-hide CSS osztály eltávolításával vagy az elemhez való hozzáadásával. Ez egy előre definiált CSS-osztály, amely a megjelenítést semmire állítja.
Az ng-show szintaxisa az AngularJS-ben
<element ng-show="expression"> </element>
A háttérben az elem látható vagy elrejthető az .ng-hide CSS osztály eltávolításával vagy az elemhez való hozzáadásával.
Példa az ng-show-ra az AngularJS-ben
Nézzünk meg egy ng-show-t az Angular Példában, hogyan használhatjuk az „ngshow event” direktívát egy rejtett elem megjelenítésére.
<!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>
Kód magyarázata:
- A gombelemhez csatoljuk az ng-click esemény direktívát. Itt a „ShowHide” nevű funkcióra hivatkozunk, amelyet a vezérlőnkben, a DemoControllerben határoztunk meg.
- Az ng-show attribútumot egy div címkéhez csatoljuk, amely az Angular szöveget tartalmazza. Ez az a címke, amelyet az ng-show attribútum alapján fogunk megjeleníteni/elrejteni.
- A vezérlőben az „IsVissible” tagváltozót csatoljuk a hatókör objektumhoz. Ezt az attribútumot a rendszer átadja az ng-show angular attribútumnak (2. lépés), hogy szabályozza a div vezérlő láthatóságát. Ezt kezdetben false értékre állítjuk, hogy az oldal első megjelenésekor a div címke el legyen rejtve. Megjegyzés: - Ha az ng-show attribútumok igazra vannak állítva, akkor az ezt követő vezérlő, ami esetünkben a div tag, megjelenik a felhasználó számára. Ha az ng-show attribútum false értékre van állítva, a vezérlő el lesz rejtve a felhasználó elől.
- Kódot adunk a ShowHide függvényhez, amely az IsVisible tagváltozót igaz értékre állítja, így az AngularJS show hide div on click tag megjeleníthető a felhasználó számára.
Ha az AngularJS ng-show és ng-hide kódja sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
Output: 1
A kimenetből,
- Kezdetben láthatja, hogy az „AngularJS” szöveget tartalmazó div címke nem jelenik meg, és ennek az az oka, hogy az isVisible hatókör objektum kezdetben false értékre van állítva, amelyet ezt követően a div címke ng-show direktívájának adnak át.
- Ha rákattint a „Show AngularJS” gombra, az isVisible tagváltozót igazzá változtatja, í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 kimenet most a div címkét mutatja az Angular szöveggel.
Mi az ng-hide irányelv az AngularJS-ben?
A ng-hide direktíva Az AngularJS-ben egy olyan függvény, amellyel egy elem el lesz rejtve, ha a kifejezés TRUE. Ha a kifejezés HAMIS, az elem megjelenik. A háttérben az elem látható vagy elrejthető az .ng-hide CSS osztály eltávolításával vagy az elemhez való hozzáadásával.
Az ng-hide szintaxisa az AngularJS-ben
<element ng-hide="expression"> </element>
Másrészt ng-hide esetén az elem el van rejtve, ha a kifejezés igaz, és megjelenik, ha hamis.
Példa az ng-hide-re az AngularJS-ben
Nézzük meg a hasonló ng-hide példát, mint az ngShow esetében, hogy bemutassuk, hogyan használhatók az ng-hide és ng-show attribútumok.
<!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>
Kód magyarázata:
- A gombelemhez csatoljuk az ng-click esemény direktívát. Itt a ShowHide nevű függvényre hivatkozunk, amelyet a vezérlőnkben, a DemoControllerben határoztunk meg.
- Az ng-hide attribútumot egy div címkéhez csatoljuk, amely az Angular szöveget tartalmazza. Ez az a címke, amelyet az ng-show attribútum alapján fogunk használni a hide megjelenítésére Angular-ban.
- A vezérlőben az isVisible tagváltozót csatoljuk a hatókör objektumhoz. Ezt az attribútumot a rendszer átadja az ng-show angular attribútumnak, hogy szabályozza a div vezérlő láthatóságát. Ezt kezdetben false értékre állítjuk, hogy az oldal első megjelenésekor a div címke el legyen rejtve.
- Kódot adunk a ShowHide függvényhez, amely az IsVisible tagváltozót igaz értékre állítja, így a div címke megjelenik a felhasználó számára.
Ha az ng show hide kódja sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kimenetből,
- Kezdetben láthatja, hogy az „AngularJs” szöveget tartalmazó div címke kezdetben megjelenik, mert a false tulajdonságértéket elküldi az ng-hide direktíva.
- Amikor a „Szög elrejtése” gombra kattintunk, a true tulajdonság értéke elküldésre kerül az ng-hide direktívának. Ezért az alábbi kimenet jelenik meg, amelyben az „Angular” szó el lesz rejtve.
AngularJS eseményfigyelő irányelvek
Ezek közül egy vagy több használatával AngularJS eseményfigyelőket adhat hozzá HTML-elemeihez irányelvek:
- ng-blur
- ng-változás
- ng-kattintás
- ng-másolat
- ng-cut
- ng-dblclick
- ng-fókusz
- ng-keydown
- ng-billentyűnyomás
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-paste
Összegzésként
- Az eseményirányelvek az Angular alkalmazásban egyéni kód hozzáadására szolgálnak a felhasználói beavatkozás által generált eseményekre, például gombkattintásra, billentyűzet- és egérkattintásra stb.
- A leggyakoribb eseménydirektíva az AngularJS ng-click direktíva, amelyet a kattintási események kezelésére használnak. Ennek leggyakrabban az AngluarJS gombkattintására szolgál, ahol kód hozzáadható a gombkattintásokhoz.
- A HTML elemek ennek megfelelően elrejthetők vagy megjeleníthetők a felhasználó számára a AngularJS ng-show irányelv, Angular ng-hide direktíva és ng-visible attribútumok.
