Ich habe ein Formular zum Beantworten von Nachrichten, die ich nur isReplyFormOpen
anzeigen möchte, wenn dies der Fall ist. Jedes Mal, wenn ich auf die Antwortschaltfläche klicke, möchte ich umschalten, ob das Formular angezeigt wird oder nicht. Wie kann ich das machen?
javascript
html
angularjs
ng-show
Liamzebedee
quelle
quelle
ng-class
:<span ng-click="started=!started" ng-class="started ? 'btn-danger' : 'btn-success' ">
+1. Danke :) ♥.Grundsätzlich habe ich es gelöst, indem ich den Wert bei jedem Klick NICHT
isReplyFormOpen
eingegeben habe:quelle
ng-init
notwendig?undefined
anfänglich und!undefined == true
Wenn basierend auf hier klicken, ist es:
quelle
Wenn Sie eine Schaltfläche in Controller A und das Element haben, das Sie in Controller B anzeigen möchten, müssen Sie möglicherweise die Punktnotation verwenden, um auf die Bereichsvariable zwischen den Controllern zuzugreifen.
Dies funktioniert beispielsweise nicht :
Um dies zu lösen, erstellen Sie eine globale Variable (z. B. in Controller A oder Ihrem Hauptcontroller):
Fügen Sie dann Ihrem Klick ein 'globales' Präfix hinzu und zeigen Sie Variablen an:
Weitere Informationen finden Sie unter Verschachtelte Zustände und verschachtelte Ansichten in der Angular-UI-Dokumentation . Sehen Sie sich ein Video an oder lesen Sie die Bereiche zum Verständnis .
quelle
Hier ist ein Beispiel für die Verwendung der Anweisungen ngclick & ng-if.
Hinweis : ng-if entfernt das Element aus dem DOM, ng-hide verbirgt jedoch nur die Anzeige des Elements.
quelle
Wenn Sie mehrere Menüs mit Untermenüs haben, können Sie mit der folgenden Lösung fortfahren.
HTML
Es gibt zwei Funktionen, die ich zuerst aufgerufen habe: ng-click = hasSubMenu ('Dashboard'). Diese Funktion wird zum Umschalten des Menüs verwendet und im folgenden Code erläutert. Die ng-class = "{active: isActive ('/ customerCare / transaction')} fügt dem aktuellen Menüpunkt eine aktive Klasse hinzu.
Jetzt habe ich einige Funktionen in meiner App definiert:
Fügen Sie zunächst eine Abhängigkeit $ rootScope hinzu, mit der Variablen und Funktionen deklariert werden. Weitere Informationen zu $ roootScope finden Sie unter folgendem Link: https://docs.angularjs.org/api/ng/service/ $ rootScope
Hier ist meine App-Datei:
Die obige Funktion wird verwendet, um dem aktuellen Menüpunkt eine aktive Klasse hinzuzufügen.
Standardmäßig sind $ rootScope.showDash und $ rootScope.showCC auf false gesetzt. Die Menüs werden beim ersten Laden der Seite geschlossen. Wenn Sie mehr als zwei Untermenüs haben, fügen Sie diese entsprechend hinzu.
Die Funktion hasSubMenu () dient zum Umschalten zwischen den Menüs. Ich habe eine kleine Bedingung hinzugefügt
Das Untermenü bleibt geöffnet, nachdem die Seite gemäß dem ausgewählten Menüpunkt neu geladen wurde.
Ich habe meine Seiten wie folgt definiert:
Sie können die Funktion isActive () nur verwenden, wenn Sie ein einzelnes Menü ohne Untermenü haben. Sie können den Code entsprechend Ihren Anforderungen ändern. Hoffe das wird helfen. Ich wünsche ihnen einen wunderbaren Tag :)
quelle