AngularJS ng-klik, ng-vis & ng-skjul direktiver med eksempel
James Hartman
AngularJS-begivenheder
AngularJS-begivenheder er de funktionaliteter, der tillader webapplikationer at interagere med brugerinput såsom museklik, tastaturinput, musebevægelse osv. Hændelser skal håndteres i webbaserede applikationer for at udføre specifikke opgaver og handlinger. Den udløses, når en bestemt handling udføres af brugeren.
Når du opretter webbaserede applikationer, skal din applikation før eller siden håndtere DOM-begivenheder som museklik, bevægelser, tastaturtryk, ændringshændelser osv.
AngularJS kan tilføje funktionalitet, som kan bruges til at håndtere sådanne hændelser.
Hvis der for eksempel er en knap på siden, og du vil behandle noget, når der trykkes på knappen, kan vi bruge Angular ng-click begivenhedsdirektivet.
Vi vil se nærmere på begivenhedsdirektiver i løbet af dette kursus.
Hvad er ng-click-direktivet i AngularJS?
"ng-klik direktiv" i AngularJS bruges til at anvende tilpasset adfærd, når der klikkes på et element i HTML. Dette direktiv bruges normalt til knapper, fordi det er det mest almindelige til at tilføje begivenheder, der reagerer på klik udført af brugeren. Det bruges også til popup-advarsler, når der klikkes på en knap.
Syntaks for ng-klik i AngularJS
<element ng-click="expression"> </element>
Lad os se et simpelt eksempel på, hvordan vi kan implementere klikbegivenheden.
Eksempel på ng-klik i AngularJS
I dette ng-klik-eksempel vil vi have en tællervariabel, som vil stige i værdi, når brugeren klikker på en knap.
<!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>
Kodeforklaring:
- Vi bruger først ng-init-direktivet til at sætte værdien af en lokal variabeltælling til 0.
- Vi introducerer derefter ng-click-begivenhedsdirektivet til knappen. I dette direktiv skriver vi kode for at øge værdien af tællevariablen med 1.
- Her viser vi værdien af tællevariablen for brugeren.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
Fra ovenstående output,
- Vi kan se, at knappen "Inkrement" vises, og værdien af tællevariablen er initialt nul.
- Når du klikker på knappen Inkrement, øges værdien af optællingen tilsvarende som vist på outputbilledet nedenfor.
Hvad er ng-show-direktivet i AngularJS?
ng-Show direktiv i AngularJS bruges til at vise eller skjule en given specifik HTML element baseret på det udtryk, der leveres til ng-show-attributten. I baggrunden vises eller skjules HTML-elementet ved at fjerne eller tilføje .ng-hide CSS-klassen til elementet. Det er en foruddefineret CSS-klasse, som indstiller displayet til ingen.
Syntaks for ng-show i AngularJS
<element ng-show="expression"> </element>
I baggrunden vises eller skjules elementet ved at fjerne eller tilføje .ng-hide CSS-klassen til elementet.
Eksempel på ng-show i AngularJS
Lad os se på et ng-show i Angular Eksempel på, hvordan vi kan bruge "ngshow event"-direktivet til at vise et skjult element.
<!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>
Kodeforklaring:
- Vi vedhæfter ng-click-begivenhedsdirektivet til knapelementet. Her refererer vi til en funktion kaldet "ShowHide", som er defineret i vores controller - DemoController.
- Vi knytter ng-show-attributten til et div-tag, som indeholder teksten Angular. Dette er tagget, som vi skal vise/skjule baseret på ng-show-attributten.
- I controlleren vedhæfter vi medlemsvariablen "IsVisible" til scope-objektet. Denne attribut vil blive videregivet til ng-show vinkelattributten (trin #2) for at kontrollere synligheden af div-kontrollen. Vi sætter i første omgang dette til falsk, så når siden først vises, vil div-tagget være skjult. Bemærk: - Når attributterne ng-show er sat til sand, vil den efterfølgende kontrol, som i vores tilfælde er div-tagget, blive vist til brugeren. Når ng-show-attributten er sat til falsk, vil kontrollen blive skjult for brugeren.
- Vi tilføjer kode til ShowHide-funktionen, som vil sætte IsVisible-medlemsvariablen til sand, så AngularJS show hide div på klik-tag kan vises til brugeren.
Hvis koden for ng-show og ng-hide i AngularJS eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output: 1
Fra udgangen,
- Du kan indledningsvis se, at div-tagget, som har teksten "AngularJS", ikke vises, og det skyldes, at isVisible scope-objektet initialt er sat til false, som så efterfølgende sendes til ng-show-direktivet for div-tagget.
- Når du klikker på knappen "Vis AngularJS", ændres medlemsvariablen isVisible til at blive sand, og teksten "Angular" bliver derfor synlig for brugeren. Nedenstående output vil blive vist til brugeren.
Outputtet viser nu div-tagget med Angular-teksten.
Hvad er ng-hide-direktivet i AngularJS?
ng-hide direktiv i AngularJS er en funktion, hvorved et element vil blive skjult, hvis udtrykket er TRUE. Hvis udtrykket er FALSK, vil elementet blive vist. I baggrunden vises eller skjules elementet ved at fjerne eller tilføje .ng-hide CSS-klassen til elementet.
Syntaks for ng-hide i AngularJS
<element ng-hide="expression"> </element>
På den anden side med ng-hide, er elementet skjult, hvis udtrykket er sandt, og det vil blive vist, hvis det er falsk.
Eksempel på ng-hide i AngularJS
Lad os se på det lignende ng-hide-eksempel som det vist for ngShow for at vise, hvordan ng-hide- og ng-show-attributterne kan bruges.
<!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>
Kodeforklaring:
- Vi vedhæfter ng-click-begivenhedsdirektivet til knapelementet. Her refererer vi til en funktion kaldet ShowHide, som er defineret i vores controller - DemoController.
- Vi knytter ng-hide-attributten til et div-tag, som indeholder teksten Angular. Dette er tagget, som vi vil bruge til at vise hide i Angular baseret på ng-show-attributten.
- I controlleren vedhæfter vi medlemsvariablen isVisible til scope-objektet. Denne attribut vil blive videregivet til ng-show vinkelattributten for at kontrollere synligheden af div-kontrollen. Vi sætter i første omgang dette til falsk, så når siden først vises, vil div-tagget være skjult.
- Vi tilføjer kode til ShowHide-funktionen, som vil sætte IsVisible-medlemsvariablen til sand, så div-tagget kan vises til brugeren.
Hvis koden til ng show hide eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
Fra udgangen,
- Du kan indledningsvis se, at div-tagget, som har teksten "AngularJs", først vises, fordi egenskabsværdien for false sendes til ng-hide-direktivet.
- Når vi klikker på "Skjul vinkel"-knappen, sendes egenskabsværdien af sand til ng-hide-direktivet. Derfor vil nedenstående output blive vist, hvor ordet "Angular" vil være skjult.
AngularJS-begivenhedslytterdirektiver
Du kan tilføje AngularJS begivenhedslyttere til dine HTML-elementer ved at bruge en eller flere af disse direktiver:
- ng-sløring
- ng-ændring
- ng-klik
- ng-kopi
- ng-snit
- ng-dblklik
- ng-fokus
- ng-taste ned
- ng-tastetryk
- ng-tast
- ng-mousedown
- ng-mouseenter
- ng-museblad
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-pasta
Resumé
- Hændelsesdirektiver bruges i Angular til at tilføje tilpasset kode for at reagere på hændelser genereret af brugerindgreb såsom knapklik, tastatur- og museklik osv.
- Det mest almindelige hændelsesdirektiv er AngularJS ng-click-direktivet, som bruges til at håndtere klikhændelser. Den mest almindelige brug af dette er at klikke på AngluarJS-knapper, hvor kode kan tilføjes for at svare på et knapklik.
- HTML-elementer kan også skjules eller vises til brugeren i overensstemmelse hermed ved at bruge AngularJS ng-show direktiv, Kantet ng-skjul direktiv og ng-synlige attributter.
