AngularJS ng-click-, ng-show- und ng-hide-Anweisungen mit Beispiel
James Hartmann
AngularJS-Ereignisse
AngularJS-Ereignisse sind die Funktionalitäten, die es Webanwendungen ermöglichen, mit Benutzereingaben wie Mausklick, Tastatureingaben, Mauszeiger usw. zu interagieren. Ereignisse müssen in webbasierten Anwendungen verarbeitet werden, um bestimmte Aufgaben und Aktionen auszuführen. Es wird ausgelöst, wenn der Benutzer eine bestimmte Aktion ausführt.
Wenn Sie webbasierte Anwendungen erstellen, muss Ihre Anwendung früher oder später DOM-Ereignisse wie Mausklicks, Bewegungen, Tastatureingaben, Änderungsereignisse usw. verarbeiten.
AngularJS kann Funktionen hinzufügen, die zur Behandlung solcher Ereignisse verwendet werden können.
Wenn es beispielsweise eine Schaltfläche auf der Seite gibt und Sie etwas verarbeiten möchten, wenn auf die Schaltfläche geklickt wird, können wir die Angular-Ereignisdirektive ng-click verwenden.
In diesem Kurs werden wir uns ausführlich mit Event-Anweisungen befassen.
Was ist die ng-click-Direktive in AngularJS?
Der „ng-click-Anweisung“ in AngularJS wird verwendet, um benutzerdefiniertes Verhalten anzuwenden, wenn auf ein Element in HTML geklickt wird. Diese Anweisung wird normalerweise für Schaltflächen verwendet, da dies am häufigsten zum Hinzufügen von Ereignissen verwendet wird, die auf vom Benutzer ausgeführte Klicks reagieren. Es wird auch verwendet, um Benachrichtigungen anzuzeigen, wenn auf eine Schaltfläche geklickt wird.
Syntax von ng-click in AngularJS
<element ng-click="expression"> </element>
Schauen wir uns ein einfaches Beispiel an, wie wir das Klickereignis implementieren können.
Beispiel für ng-click in AngularJS
In diesem ng-click-Beispiel haben wir eine Zählervariable, deren Wert erhöht wird, wenn der Benutzer auf eine Schaltfläche klickt.
<!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>
Code-Erklärung:
- Wir verwenden zunächst die ng-init-Direktive, um den Wert einer lokalen Variablen count auf 0 zu setzen.
- Anschließend führen wir die ng-click-Ereignisdirektive für die Schaltfläche ein. In dieser Direktive schreiben wir Code, um den Wert der Zählvariablen um 1 zu erhöhen.
- Hier zeigen wir dem Benutzer den Wert der Zählvariablen an.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang:
Aus der obigen Ausgabe:
- Wir können sehen, dass die Schaltfläche „Erhöhen“ angezeigt wird und der Wert der Zählvariable zunächst Null ist.
- Wenn Sie auf die Schaltfläche „Inkrementieren“ klicken, wird der Zählwert entsprechend erhöht, wie im Ausgabebild unten gezeigt.
Was ist die ng-show-Direktive in AngularJS?
Der ng-Show-Direktive in AngularJS wird verwendet, um ein bestimmtes bestimmtes Element anzuzeigen oder auszublenden HTML Element basierend auf dem Ausdruck, der für das ng-show-Attribut bereitgestellt wird. Im Hintergrund wird das HTML-Element angezeigt oder ausgeblendet, indem die CSS-Klasse .ng-hide zum Element entfernt oder hinzugefügt wird. Es handelt sich um eine vordefinierte CSS-Klasse, die die Anzeige auf „Keine“ setzt.
Syntax von ng-show in AngularJS
<element ng-show="expression"> </element>
Im Hintergrund wird das Element angezeigt oder ausgeblendet, indem die CSS-Klasse .ng-hide zum Element entfernt oder hinzugefügt wird.
Beispiel für ng-show in AngularJS
Schauen wir uns ein ng-show in Angular an. Beispiel dafür, wie wir die Direktive „ngshow event“ verwenden können, um ein verstecktes Element anzuzeigen.
<!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>
Code-Erklärung:
- Wir hängen die ng-click-Ereignisdirektive an das Schaltflächenelement an. Hier verweisen wir auf eine Funktion namens „ShowHide“, die in unserem Controller – DemoController – definiert ist.
- Wir hängen das ng-show-Attribut an ein div-Tag an, das den Text Angular enthält. Dies ist das Tag, das wir basierend auf dem ng-show-Attribut ein-/ausblenden werden.
- Im Controller fügen wir die Membervariable „IsVisible“ dem Scope-Objekt hinzu. Dieses Attribut wird an das Angular-Attribut ng-show übergeben (Schritt 2), um die Sichtbarkeit des Div-Steuerelements zu steuern. Wir setzen dies zunächst auf „false“, damit das Div-Tag beim ersten Anzeigen der Seite ausgeblendet wird. Hinweis: - Wenn das Attribut ng-show auf true gesetzt ist, wird dem Benutzer das nachfolgende Steuerelement, in unserem Fall das div-Tag, angezeigt. Wenn das ng-show-Attribut auf „false“ gesetzt ist, wird das Steuerelement für den Benutzer ausgeblendet.
- Wir fügen der ShowHide-Funktion Code hinzu, der die IsVisible-Mitgliedsvariable auf „true“ setzt, damit dem Benutzer das AngularJS-Tag „show hide div on click“ angezeigt werden kann.
Wenn der Code für ng-show und ng-hide in AngularJS erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe: 1
Aus der Ausgabe,
- Sie können zunächst sehen, dass das div-Tag mit dem Text „AngularJS“ nicht angezeigt wird. Dies liegt daran, dass das isVisible-Bereichsobjekt zunächst auf „false“ gesetzt ist, was dann anschließend an die ng-show-Direktive des div-Tags übergeben wird.
- Wenn Sie auf die Schaltfläche „AngularJS anzeigen“ klicken, wird die Mitgliedsvariable isVisible in „true“ geändert und somit wird der Text „Angular“ für den Benutzer sichtbar. Die folgende Ausgabe wird dem Benutzer angezeigt.
Die Ausgabe zeigt nun das div-Tag mit dem Angular-Text.
Was ist die ng-hide-Direktive in AngularJS?
Der ng-hide-Direktive in AngularJS ist eine Funktion, mit der ein Element ausgeblendet wird, wenn der Ausdruck TRUE ist. Wenn der Ausdruck FALSE ist, wird das Element angezeigt. Im Hintergrund wird das Element angezeigt oder ausgeblendet, indem die CSS-Klasse .ng-hide zum Element entfernt oder hinzugefügt wird.
Syntax von ng-hide in AngularJS
<element ng-hide="expression"> </element>
Bei ng-hide hingegen wird das Element ausgeblendet, wenn der Ausdruck wahr ist, und es wird angezeigt, wenn er falsch ist.
Beispiel für ng-hide in AngularJS
Schauen wir uns das ähnliche ng-hide-Beispiel wie das für ngShow gezeigte an, um zu zeigen, wie die Attribute ng-hide und ng-show verwendet werden können.
<!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>
Code-Erklärung:
- Wir hängen die ng-click-Ereignisdirektive an das Schaltflächenelement an. Hier verweisen wir auf eine Funktion namens ShowHide, die in unserem Controller – DemoController – definiert ist.
- Wir hängen das ng-hide-Attribut an ein div-Tag an, das den Text Angular enthält. Dies ist das Tag, das wir verwenden werden, um „hide“ in Angular basierend auf dem Attribut „ng-show“ anzuzeigen.
- Im Controller fügen wir die Membervariable isVisible dem Scope-Objekt hinzu. Dieses Attribut wird an das Angular-Attribut ng-show übergeben, um die Sichtbarkeit des Div-Steuerelements zu steuern. Wir setzen dies zunächst auf „false“, damit beim ersten Anzeigen der Seite das Div-Tag ausgeblendet wird.
- Wir fügen der ShowHide-Funktion Code hinzu, der die IsVisible-Mitgliedsvariable auf „true“ setzt, damit das div-Tag dem Benutzer angezeigt werden kann.
Wenn der Code für ng show hide erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang:
Aus der Ausgabe,
- Sie können zunächst sehen, dass das div-Tag mit dem Text „AngularJs“ zunächst angezeigt wird, da der Eigenschaftswert „false“ an die ng-hide-Direktive gesendet wird.
- Wenn wir auf die Schaltfläche „Hide Angular“ klicken, wird der Eigenschaftswert „true“ an die ng-hide-Direktive gesendet. Daher wird die folgende Ausgabe angezeigt, in der das Wort „Angular“ ausgeblendet wird.
AngularJS-Ereignis-Listener-Anweisungen
Sie können AngularJS-Ereignis-Listener zu Ihren HTML-Elementen hinzufügen, indem Sie einen oder mehrere davon verwenden Richtlinien:
- ng-unschärfe
- ng-change
- ng-Klick
- ng-Kopie
- ng-Schnitt
- ng-dblclick
- ng-Fokus
- ng-keydown
- ng-Tastendruck
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-paste
Zusammenfassung
- Ereignisanweisungen werden in Angular verwendet, um benutzerdefinierten Code hinzuzufügen, der auf Ereignisse reagiert, die durch Benutzereingriffe wie Tastenklicks, Tastatur- und Mausklicks usw. generiert werden.
- Die gebräuchlichste Ereignisanweisung ist die AngularJS-Anweisung ng-click, die zur Verarbeitung von Klickereignissen verwendet wird. Am häufigsten wird dies für AngluarJS-Schaltflächenklicks verwendet, wobei Code hinzugefügt werden kann, um auf einen Schaltflächenklick zu reagieren.
- HTML-Elemente können auch entsprechend ausgeblendet oder für den Benutzer angezeigt werden AngularJS ng-show-Direktive, Angular ng-hide-Direktive und ng-visible-Attribute.