Mam formularz odpowiadania na wiadomości, który chcę wyświetlać tylko wtedy, gdy isReplyFormOpen
jest prawdziwy, i za każdym razem, gdy klikam przycisk odpowiedzi, chcę przełączać, czy formularz jest wyświetlany, czy nie. W jaki sposób mogę to zrobić?
javascript
html
angularjs
ng-show
liamzebedee
źródło
źródło
ng-class
:<span ng-click="started=!started" ng-class="started ? 'btn-danger' : 'btn-success' ">
+1. Dziękuję :) ♥.Zasadniczo rozwiązałem to, NIE zaznaczając
isReplyFormOpen
wartości po kliknięciu:źródło
ng-init
konieczne?undefined
początkowo i!undefined == true
Jeśli na podstawie kliknij tutaj, jest to:
źródło
Warto zauważyć, że jeśli masz przycisk w kontrolerze A i element, który chcesz wyświetlić w kontrolerze B, może być konieczne użycie notacji kropkowej, aby uzyskać dostęp do zmiennej zakresu między kontrolerami.
Na przykład to nie zadziała:
Aby rozwiązać ten problem, utwórz zmienną globalną (np. W kontrolerze A lub głównym kontrolerze):
Następnie dodaj przedrostek „globalny” do kliknięcia i pokaż zmienne:
Aby uzyskać więcej informacji, zapoznaj się z zagnieżdżonymi stanami i widokami zagnieżdżonymi w dokumentacji Angular-UI , obejrzyj wideo lub przeczytaj zrozumienie zakresów .
źródło
Oto przykład użycia dyrektyw ngclick i ng-if.
Uwaga : to ng-if usuwa element z DOM, ale ng-hide po prostu ukrywa wyświetlanie elementu.
źródło
Jeśli masz wiele menu z podmenu, możesz skorzystać z poniższego rozwiązania.
HTML
Dwie funkcje, które najpierw wywołałem, to ng-click = hasSubMenu ('dashboard'). Ta funkcja będzie używana do przełączania menu i jest wyjaśniona w poniższym kodzie. Ng-class = "{active: isActive ('/ customerCare / transaction')} doda klasę aktywną do bieżącej pozycji menu.
Teraz zdefiniowałem kilka funkcji w mojej aplikacji:
Najpierw dodaj zależność $ rootScope, która jest używana do deklarowania zmiennych i funkcji. Aby dowiedzieć się więcej o $ roootScope, skorzystaj z łącza: https://docs.angularjs.org/api/ng/service/ $ rootScope
Oto mój plik aplikacji:
Powyższa funkcja służy do dodawania aktywnej klasy do bieżącej pozycji menu.
Domyślnie $ rootScope.showDash i $ rootScope.showCC są ustawione na false. Spowoduje to zamknięcie menu po pierwszym załadowaniu strony. Jeśli masz więcej niż dwa podmenu, dodaj odpowiednio.
Funkcja hasSubMenu () będzie działać do przełączania się między menu. Dodałem mały warunek
podmenu pozostanie otwarte po przeładowaniu strony zgodnie z wybraną pozycją menu.
Moje strony zdefiniowałem w następujący sposób:
Funkcji isActive () możesz używać tylko wtedy, gdy masz jedno menu bez podmenu. Możesz zmodyfikować kod zgodnie z wymaganiami. Mam nadzieję, że to pomoże. Miłego dnia :)
źródło