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

By: James Hartmann James Hartmann
Hours Aktualisiert

โšก Intelligente Zusammenfassung

AngularJS-Ereignisse ermรถglichen es Webanwendungen, auf Benutzereingaben wie Mausklicks, Tastatureingaben und Hover-Aktionen zu reagieren. Direktiven wie ng-click, ng-show und ng-hide binden dieses Verhalten deklarativ im Markup anstatt รผber manuelle DOM-Listener.

  • ๐Ÿ–ฑ๏ธ Klickverarbeitung: ng-click verknรผpft einen Ausdruck oder eine Controller-Funktion mit einem Element, meistens einem Button.
  • ๐Ÿ‘๏ธ Bedingte Anzeige: ng-show rendert ein Element, wenn sein Ausdruck wahr ist, wรคhrend ng-hide es entfernt, wenn der Ausdruck wahr ist.
  • ???? Mechanismus: Beide Direktiven schalten die integrierte CSS-Klasse ng-hide um, die display auf none setzt, sodass das Element im DOM erhalten bleibt.
  • ๐Ÿ”— Geltungsbereichsbindung: Eine Membervariable im $scope steuert die Sichtbarkeit, und eine ร„nderung innerhalb eines Handlers aktualisiert die Ansicht sofort.
  • ๐Ÿ“‹ Richtbereich: Achtzehn Zuhรถreranweisungen decken die Ereignisse Unschรคrfe, ร„nderung, Fokus, Tastatur, Maus, Einfรผgen und Absenden ab.
  • โš ๏ธ Support-Status: AngularJS hat am 31. Dezember 2021 das Ende seines Lebenszyklus erreicht, daher sollten neue Projekte stattdessen auf das moderne Angular abzielen.
MEHR LESEN

AngularJS ng-click ng-show ng-hide Direktiven

AngularJS-Ereignisse

AngularJS-Ereignisse Webanwendungen kรถnnen so auf Benutzereingaben wie Mausklicks, Tastatureingaben und Mausbewegungen reagieren. Ereignisse mรผssen in Webanwendungen verarbeitet werden, um bestimmte Aufgaben und Aktionen auszufรผhren. Jedes Ereignis wird ausgelรถst, wenn der Benutzer die entsprechende Aktion ausfรผhrt.

Bei der Entwicklung von Webanwendungen muss Ihre Anwendung frรผher oder spรคter DOM-Ereignisse wie Mausklicks und -bewegungen, Tastatureingaben und ร„nderungsereignisse verarbeiten kรถnnen. AngularJS Liefert Richtlinien, die diese Ereignisse deklarativ behandeln.

Wenn beispielsweise ein Button auf der Seite beim Anklicken eine Aktion auslรถsen soll, bietet die ng-click-Ereignisdirektive diesen Hook.

โš ๏ธ Supporthinweis: AngularJS hat erreicht Lebensende am 31. Dezember 2021 und erhรคlt keine weiteren Patches oder Sicherheitsupdates vom Angular-Team. Die folgenden Anweisungen sind weiterhin fรผr die Wartung bestehender AngularJS 1.x-Anwendungen gรผltig; fรผr neue Projekte verwenden Sie bitte die modernen Anweisungen. Angular, wobei diese Direktiven durch Ereignisbindungen wie z. B. ersetzt werden (click) und durch *ngIf.

Was ist die ng-click-Direktive in AngularJS?

Das โ€žng-click-Anweisungโ€œ In AngularJS wird beim Klicken auf ein HTML-Element ein benutzerdefiniertes Verhalten angewendet. Dies wird รผblicherweise bei Schaltflรคchen verwendet, da diese am hรคufigsten fรผr Klickreaktionen genutzt werden, und dient auch dazu, beim Klicken Warnmeldungen auszulรถsen.

Syntax von ng-click in AngularJS

<element
 ng-click="expression">
</element>

Beispiel fรผr ng-click in AngularJS

In diesem ng-click-Beispiel wird eine Zรคhlervariable jedes Mal erhรถht, wenn der Benutzer auf eine Schaltflรคche klickt.

ng-click-Direktive in AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.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 Erlรคuterung:

  1. Die ng-init-Direktive setzt die lokale Variable count um 0.
  2. Die ng-click-Direktive des Buttons erhรถht den Wert. count mit jedem Klick um 1.
  3. Die Interpolation {{count}} Zeigt dem Benutzer den aktuellen Wert an.

Ausgang:

ng-click in AngularJS

Die Schaltflรคche โ€žInkrementierenโ€œ wird angezeigt, und der Zรคhlerstand ist anfรคnglich null. Durch Klicken darauf wird der Wert erhรถht, wie die Abbildung unten zeigt.

ng-click in AngularJS

Was ist die ng-show-Direktive in AngularJS?

Das ng-show-Direktive zeigt oder verbirgt ein bestimmtes HTML Das Element wird basierend auf dem Ausdruck, der dem ng-show-Attribut รผbergeben wird, ein- oder ausgeblendet. Intern wird das Element durch Entfernen oder Hinzufรผgen des Ausdrucks ein- oder ausgeblendet. .ng-hide CSS-Klasse, eine vordefinierte Klasse, die festlegt display zu none.

Syntax von ng-show in AngularJS

<element
 ng-show="expression">
</element>

Beispiel fรผr ng-show in AngularJS

Dieses Beispiel verwendet ng-show, um ein verstecktes Element anzuzeigen.

ng-show-Direktive in AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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 Erlรคuterung:

  1. Die ng-click-Direktive des Buttons verweist auf ein ShowHide Funktion, die im Controller definiert ist DemoController.
  2. Das ng-show-Attribut ist dem div-Element zugeordnet, das den Text โ€žAngularโ€œ enthรคlt. Dieses Element ist fรผr die Steuerung der Sichtbarkeit zustรคndig.
  3. Im Controller, IsVisible Die Membervariable wird dem Scope-Objekt zugewiesen und initialisiert. falseDas Div-Element ist also beim ersten Laden der Seite ausgeblendet. Mit ng-show wird ein Wert von was immer dies auch sein sollte. zeigt das Element und falsch verbirgt es.
  4. Das ShowHide Funktionssรคtze IsVisible auf true setzen, damit das div-Element sichtbar wird.

Ausgang:

ng-show-Direktive in AngularJS

Der Div-Container, der den Text enthรคlt, wird anfรคnglich nicht angezeigt, weil IsVisible beginnt als falsch. Klicken Angular anzeigen setzt den Wert auf โ€žtrueโ€œ und der Text wird sichtbar.

ng-show-Direktive in AngularJS

ร„HNLICHE ARTIKEL

Was ist die ng-hide-Direktive in AngularJS?

Das ng-hide-Direktive Es blendet ein Element aus, wenn sein Ausdruck den Wert TRUE ergibt, und zeigt es an, wenn der Ausdruck FALSE ergibt โ€“ genau das Gegenteil von ng-show. Intern verwendet es denselben .ng-hide CSS-Klasse.

Syntax von ng-hide in AngularJS

<element
 ng-hide="expression">
</element>

Beispiel fรผr ng-hide in AngularJS

Dieses Beispiel spiegelt das ng-show-Beispiel wider, sodass die beiden Direktiven direkt verglichen werden kรถnnen.

ng-hide-Direktive in AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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 = true;
        };
    });
</script>

</body>
</html>

Code Erlรคuterung:

  1. Die ng-click-Direktive des Buttons verweist auf die ShowHide Funktion in DemoController.
  2. Das ng-verbergen Das Attribut ist dem Div-Element zugeordnet, das den Text โ€žAngularโ€œ enthรคlt.
  3. IsVisible wird initialisiert auf falseDa es sich hier um ng-hide und nicht um ng-show handelt, bedeutet ein Wert von false, dass das div-Element ausgeblendet ist. sichtbar wenn die Seite zum ersten Mal geladen wird.
  4. Das ShowHide Funktionssรคtze IsVisible auf true setzen, wodurch das div-Element ausgeblendet wird.

Ausgang:

ng-hide-Direktive in AngularJS

Das Div-Element wird zunรคchst angezeigt, da ng-hide den Wert false erhรคlt. Klicken Angular ausblenden Das Ergebnis ist wahr und das Wort verschwindet.

ng-hide-Direktive in AngularJS

ng-show vs. ng-hide vs. ng-if: Hauptunterschiede

Drei Direktiven steuern, ob ein Element fรผr den Benutzer sichtbar ist. Die Auswahl einer Direktive beeinflusst sowohl das Verhalten als auch die Darstellungsleistung. Die ersten beiden Direktiven schalten lediglich eine CSS-Klasse um, sodass das Element immer auf der Seite vorhanden ist; die dritte Direktive fรผgt das Element selbst hinzu und entfernt es.

Aspekt ng-zeigen ng-verbergen ng-if
Element sichtbar, wenn Der Ausdruck ist wahr Der Ausdruck ist falsch. Der Ausdruck ist wahr
Element im DOM Immer Immer Nur solange wahr
Verwendete Methode Toggles .ng-hide Klasse Toggles .ng-hide Klasse Erschafft und zerstรถrt das Element
Kinderbereich Teilt den รผbergeordneten Gรผltigkeitsbereich Teilt den รผbergeordneten Gรผltigkeitsbereich Erstellt einen neuen untergeordneten Gรผltigkeitsbereich
Beobachter, wenn versteckt Immer noch aktiv Immer noch aktiv Entfernt
am besten fรผr Hรคufiges Umschalten des Lichtinhalts Umgekehrte Bedingungen Schwerwiegende Inhalte werden selten gezeigt

Verwenden Sie `ng-show` oder `ng-hide`, wenn ein Element hรคufig umgeschaltet wird, da das Element nie neu aufgebaut wird und die Umschaltung nur eine Klassenรคnderung erfordert. Verwenden Sie `ng-if` fรผr ressourcenintensive Abschnitte, die selten angezeigt werden, da durch das Entfernen des Elements auch dessen Beobachter entfernt werden und die Digest-Kosten in jedem Durchlauf reduziert werden.

AngularJS-Ereignis-Listener-Anweisungen

Sie kรถnnen AngularJS-Ereignislistener zu HTML-Elementen hinzufรผgen, indem Sie eine oder mehrere dieser Methoden 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
  • ng-submit

Jede Direktive akzeptiert einen Ausdruck, und das zugehรถrige Browserereignis ist darin verfรผgbar als $event wenn der Handler Details wie die gedrรผckte Taste oder die Klickkoordinaten benรถtigt.

Hรคufig gestellte Fragen

Geben Sie das Reservierte weiter $event Variable, wie in ng-click="handle($event)"Der Controller empfรคngt dann das native Ereignis und kann Ziel, Koordinaten lesen oder preventDefault aufrufen.

ng-repeat erstellt fรผr jedes Element einen eigenen Kindbereich. Die Zuweisung eines primitiven Datentyps innerhalb des Handlers aktualisiert daher nur diesen Kindbereich. Schreiben Sie stattdessen in eine Objekteigenschaft des รผbergeordneten Bereichs oder verwenden Sie $parent, um die Verรคnderung auch nach auรŸen hin sichtbar zu machen.

Teilweise. AI Tools konvertieren ng-click zu (click) und ng-show zu *ngIf Zuverlรคssig, aber bereichsabhรคngige Logik und bidirektionale Bindungen mรผssen manuell รผberprรผft werden, da es in AngularJS keinen direkten Angular-Bereich gibt.

KI-Assistenten erkennen die รผblichen Ursachen schnell: ein fehlendes ng-app-Skript, einen Controllernamen, der nicht mit der Modulregistrierung รผbereinstimmt, oder einen Tippfehler im Direktivenattribut. Die vorgeschlagene Lรถsung muss noch im Browser getestet werden.

Nein. AngularJS bietet nur ng-show, ng-hide und ng-if. Es gibt keine ng-visible-Direktive, und deren Verwendung hat keine Auswirkung, da AngularJS nicht erkannte Attribute ignoriert.

Fassen Sie diesen Beitrag mit folgenden Worten zusammen: