Funktionen zum Ein- und Ausblenden mit AngularJS

AngularJS ermöglicht es uns, die verschiedenen Änderungen in der Benutzeroberfläche mit den Änderungen im Modell zu integrieren, damit können wir Elemente wie Menüs, Listen, Links usw.., erreichen wir so ein interaktiveres und dynamischeres Erlebnis.
Einer der am häufigsten verwendeten Effekte ist das Ein- und Ausblenden, da wir auf einfache Weise Optionen in einem Menü entsprechend den Aktionen des Benutzers oder des Modells anzeigen oder nicht anzeigen. AngularJS ermöglicht es uns, es auf einfache Weise mit den Richtlinien zu integrieren ng-shgow Ja ng-verstecken.
Wenn unsere Anwendung komplex ist, werden wir sicherlich kontextsensitive Elemente haben, dh wir können ein Tool verwenden, wenn die richtigen Bedingungen erfüllt sind, oder wir sollten vielleicht einige Menüoptionen ausblenden, wenn bestimmte Bedingungen erfüllt sind.
ng-show und ng-hideDies dank AngularJS Es ist sehr einfach zu erreichen, dafür verwenden wir die Richtlinien ng-show Ja ng-verstecken, die eine umgekehrte Operation von jedem haben, zum Beispiel ng-show wird das Element anzeigen, solange seine Bedingung wahr ist, wenn es falsch ist, wird es ausgeblendet und ng-ausblenden es wird das Element ausblenden, solange seine Bedingung wahr ist, andernfalls wird es angezeigt.
Bei diesen Operationen ist also unsere Logik diejenige, die bestimmt, welche wir in unseren Anwendungen verwenden. Diese Direktiven arbeiten mit den Stilen der Elemente, auf die sie angewendet werden. Wenn wir also mit den Eigenschaften arbeiten Bildschirmsperre zu zeigen und Anzeige: keine zu verbergen, da wir nichts sehen, was wir nicht kennen oder das zu komplex ist, um es nicht zu lernen.
Im folgenden Beispiel arbeiten wir, indem wir ein Menü anzeigen oder nicht, wenn wir auf eine Option klicken, die es steuert. Dazu müssen wir Folgendes tun:
1- In einer Datei HTML wir werden einschließen AngularJS und dann werden wir den Controller generieren, der uns bei unserer Aufgabe hilft, der Controller-Code muss die Menüaktionen steuern und hätte eine Funktion oder Methode, die die Änderung beim Arbeiten mit den Zuständen der Richtlinie vornimmt, in diesem Fall werden wir arbeiten mit ng-show, sehen wir uns den erforderlichen Code an:

 Funktion ShowHideController ($ scope) {$ scope.menuState = {} $ scope.menuState.show = false; $ scope.cambiarMenu = function () {$ scope.menuState.show =! $ scope.menuState.show; }; } 

2- Dann müssen wir unsere HTML-Elemente vorbereiten, damit wir die Direktive anwenden können AngularJS, dafür definieren wir die $ Umfang des Verantwortlichen und schließlich wenden wir die Richtlinie an ng-show zur Liste, mal sehen:

Menü ändern 
 
Aktion1
Aktion2
Aktion3

Damit sollte unser Menü ein- oder ausgeblendet werden, wenn wir auf die entsprechende Schaltfläche klicken, mal sehen, wie es in unserem Browser in beiden Zuständen aussieht. Hier sehen wir den Ausgangszustand ohne Menüpunkte:

Wenn wir dann auf die Schaltfläche klicken, können wir sehen, wie das Menü angezeigt wird. Unten ist der Code, den unsere Konsole erkennt Javascript um die Funktionsweise zu demonstrieren AngularJS:

Uns ist aufgefallen, dass die Klasse im Konsolencode verschwunden ist ng-verstecken So können Sie das Menü richtig sehen.
Damit beenden wir dieses Tutorial, in dem wir gelernt haben, die Show- und Hide-Eigenschaften zu verwenden, wenn wir eine Anwendung erstellen AngularJS.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben