I have a form for replying to messages that I want to show only when isReplyFormOpen
is true, and everytime I click the reply button I want to toggle whether the form is shown or not. How can I do this?
相关问题
- Views base64 encoded blob in HTML with PHP
- Is there a limit to how many levels you can nest i
- How to toggle on Order in ReactJS
- void before promise syntax
- Keeping track of variable instances
Here's an example to use ngclick & ng-if directives.
Note: that ng-if removes the element from the DOM, but ng-hide just hides the display of the element.
If based on click here it is:
It's worth noting that if you have a button in Controller A and the element you want to show in Controller B, you may need to use dot notation to access the scope variable across controllers.
For example, this will not work:
To solve this, create a global variable (ie. in Controller A or your main Controller):
Then add a 'global' prefix to your click and show variables:
For more detail, check out the Nested States & Nested Views in the Angular-UI documentation, watch a video, or read understanding scopes.
If you have multiple Menus with Submenus, then you can go with the below solution.
HTML
There are two functions i have called first is ng-click = hasSubMenu('dashboard'). This function will be used to toggle the menu and it is explained in the code below. The ng-class="{ active: isActive('/customerCare/transaction')} it will add a class active to the current menu item.
Now i have defined some functions in my app:
First, add a dependency $rootScope which is used to declare variables and functions. To learn more about $roootScope refer to the link : https://docs.angularjs.org/api/ng/service/$rootScope
Here is my app file:
The above function is used to add active class to the current menu item.
By default $rootScope.showDash and $rootScope.showCC are set to false. It will set the menus to closed when page is initially loaded. If you have more than two submenus add accordingly.
hasSubMenu() function will work for toggling between the menus. I have added a small condition
it will remain the submenu open after reloading the page according to selected menu item.
I have defined my pages like:
You can use isActive() function only if you have a single menu without submenu. You can modify the code according to your requirement. Hope this will help. Have a great day :)
Basically I solved it by NOT-ing the
isReplyFormOpen
value whenever it is clicked:You just need to toggle the value of "isReplyFormOpen" on ng-click event