AngularJS-Ereignisse: ng-click, ng-show, ng-hide (Beispiel)

Inhaltsverzeichnis:

Anonim

Wenn Sie webbasierte Anwendungen erstellen, muss Ihre Anwendung früher oder später DOM-Ereignisse wie Mausklicks, Bewegungen, Tastendrücke, Änderungsereignisse usw. verarbeiten.

AngularJS kann Funktionen hinzufügen, mit denen solche Ereignisse behandelt werden können.

Wenn sich beispielsweise eine Schaltfläche auf der Seite befindet und Sie beim Klicken auf die Schaltfläche etwas verarbeiten möchten, können Sie die Ereignisanweisung ng-click verwenden.

Wir werden uns in diesem Kurs eingehend mit Event-Richtlinien befassen.

In diesem Tutorial lernen Sie:

  • Was ist die ng-click-Direktive?
  • Was ist die ng-show-Richtlinie?
  • Was ist die ng-hide-Direktive?

Was ist die ng-click-Direktive?

Die "ng-click-Direktive" wird verwendet, um benutzerdefiniertes Verhalten anzuwenden, wenn ein Element in HTML angeklickt wird. Dies wird normalerweise für Schaltflächen verwendet, da dies der häufigste Ort zum Hinzufügen von Ereignissen ist, die auf vom Benutzer ausgeführte Klicks reagieren

Schauen wir uns ein einfaches Beispiel an, wie wir das Klickereignis implementieren können.

In diesem Beispiel haben wir eine Zählervariable, deren Wert erhöht wird, wenn der Benutzer auf eine Schaltfläche klickt.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Code Erläuterung:

  1. Wir verwenden zuerst die Anweisung ng-init, um den Wert einer lokalen Variablenanzahl auf 0 zu setzen.
  2. Anschließend führen wir die ng-click-Ereignisanweisung in die Schaltfläche ein. In dieser Anweisung 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 wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

Aus der obigen Ausgabe,

  • Wir können sehen, dass die Schaltfläche "Inkrementieren" angezeigt wird und der Wert der Zählvariablen anfänglich Null ist.
  • Wenn Sie auf die Schaltfläche Inkrementieren klicken, wird der Wert der Zählung entsprechend erhöht, wie im folgenden Ausgabebild gezeigt.

Was ist die ng-show-Richtlinie?

Die Direktive ng-Show wird verwendet, um ein bestimmtes HTML-Element basierend auf dem Ausdruck, der für das Attribut ngShow bereitgestellt wird, ein- oder auszublenden. Im Hintergrund wird das Element angezeigt oder ausgeblendet, indem die CSS-Klasse .ng-hide entfernt oder dem Element hinzugefügt wird.

Im Hintergrund wird das Element angezeigt oder ausgeblendet, indem die CSS-Klasse .ng-hide entfernt oder dem Element hinzugefügt wird.

Schauen wir uns ein Beispiel an, wie wir die Direktive "ngshow event" verwenden können, um ein verstecktes Element anzuzeigen.

Event Registration

Guru99 Global Event




Angular

Code Erläuterung:

  1. Wir hängen die ng-click-Ereignisanweisung an das Schaltflächenelement an. Hier verweisen wir auf eine Funktion namens "ShowHide", die in unserem Controller definiert ist - DemoController.
  2. Wir hängen das Attribut ng-show an ein div-Tag an, das den Text Angular enthält. Dies ist das Tag, das wir basierend auf dem Attribut ng-show ein- / ausblenden werden.

  3. In der Steuerung hängen wir die Mitgliedsvariable "IsVisible" an das Bereichsobjekt an. Dieses Attribut wird an das Winkelattribut ng-show (Schritt 2) übergeben, 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 die Attribute ng-show auf true gesetzt sind, wird dem Benutzer das nachfolgende Steuerelement angezeigt, in unserem Fall das div-Tag. Wenn das Attribut ng-show 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 das div-Tag dem Benutzer angezeigt werden kann.

Wenn der Code erfolgreich ausgeführt wurde, 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 und 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 so geändert, dass sie wahr wird, und daher wird der Text "Angular" für den Benutzer sichtbar. Die folgende Ausgabe wird dem Benutzer angezeigt.

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

Was ist die ng-hide-Direktive?

Mit der Anweisung ng-hide wird ein Element ausgeblendet, 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 entfernt oder dem Element hinzugefügt wird.

Andererseits wird bei ng-hide das Element ausgeblendet, wenn der Ausdruck wahr ist, und es wird angezeigt, wenn er falsch ist.

Schauen wir uns das ähnliche Beispiel wie das für ngShow gezeigte an, um zu zeigen, wie das Attribut ngHide verwendet werden kann.

Event Registration

Guru99 Global Event




Angular

Code Erläuterung:

  1. Wir hängen die ng-click-Ereignisanweisung an das Schaltflächenelement an. Hier verweisen wir auf eine Funktion namens ShowHide, die in unserem Controller definiert ist - DemoController.
  2. Wir hängen das Attribut ng-hide an ein div-Tag an, das den Text Angular enthält. Dies ist das Tag, das wir basierend auf dem Attribut ng-show ein- / ausblenden werden.
  3. In der Steuerung hängen wir die Mitgliedsvariable isVisible an das Bereichsobjekt an. Dieses Attribut wird an das Winkelattribut ng-show übergeben, 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.
  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 erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

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 Anweisung ng-hide gesendet wird.
  • Wenn wir auf die Schaltfläche "Winkel ausblenden" klicken, wird der Eigenschaftswert von true an die Anweisung ng-hide gesendet. Daher wird die folgende Ausgabe angezeigt, in der das Wort "Angular" ausgeblendet wird.

AngularJS Event Listener-Anweisungen

Sie können Ihren HTML-Elementen AngularJS-Ereignis-Listener hinzufügen, indem Sie eine oder mehrere der folgenden Anweisungen verwenden:

  • ng-Unschärfe
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • 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 wurden.
  • Die häufigste Ereignisanweisung ist die ng-click-Anweisung, mit der Klickereignisse behandelt werden. Dies wird am häufigsten für Schaltflächenklicks verwendet, bei denen Code hinzugefügt werden kann, um auf einen Schaltflächenklick zu reagieren.
  • HTML-Elemente können dem Benutzer auch entsprechend ausgeblendet oder angezeigt werden, indem die Winkelattribute ng-show und ng-hide verwendet werden.