AngularJS ng-click-, ng-show- und ng-hide-Anweisungen mit Beispiel

By: James Hartmann James Hartmann
Hours Aktualisiert

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?

Die โ€ž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.

ng-click-Direktive in AngularJS
Beispiel fรผr einen NG-Klick in AngularJS
<!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:

  1. Wir verwenden zunรคchst die ng-init-Direktive, um den Wert einer lokalen Variablen count auf 0 zu setzen.
  2. 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.
  3. 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:

ng-click in AngularJS

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.

ng-click in AngularJS

ร„HNLICHE ARTIKEL

Was ist die ng-show-Direktive in AngularJS?

Die 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.

ng-show-Direktive in AngularJS

Beispiel einer ng-Show in Angular
<!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:

  1. 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.
  2. 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.
  3. 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.
  4. 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

ng-show-Direktive in AngularJS

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.

ng-show-Direktive in AngularJS

Die Ausgabe zeigt nun das div-Tag mit dem Angular-Text.

Was ist die ng-hide-Direktive in AngularJS?

Die 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.

ng-hide-Direktive in AngularJS

Beispiel fรผr ng-hide in AngularJS
<!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:

  1. 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.
  2. 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.
  3. 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.
  4. 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:

ng-hide-Direktive in AngularJS

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.

ng-hide-Direktive in AngularJS

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.

Fassen Sie diesen Beitrag mit folgenden Worten zusammen: