How do I toggle an ng-show in AngularJS based on a boolean

Question

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

User · Answer

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    lt div ng-controller  ControllerA  gt     lt a ng-click  isReplyFormOpen    isReplyFormOpen  gt Reply lt  a gt      lt div ng-controller  ControllerB  gt       lt div ng-show  isReplyFormOpen  id  replyForm  gt       lt  div gt     lt  div gt    lt  div gt    To solve this  create a global variable  ie  in Controller A or your main Controller     controller  ControllerA   function   scope       scope global           Then add a  global  prefix to your click and show variables    lt div ng-controller  ControllerA  gt     lt a ng-click  global isReplyFormOpen    global isReplyFormOpen  gt Reply lt  a gt      lt div ng-controller  ControllerB  gt       lt div ng-show  global isReplyFormOpen  id  replyForm  gt       lt  div gt     lt  div gt    lt  div gt    For more detail  check out the Nested States  amp  Nested Views in the Angular-UI documentation  watch a video  or read understanding scopes

User · Answer

Here s an example to use ngclick  amp  ng-if directives   Note  that ng-if removes the element from the DOM  but ng-hide just hides the display of the element    lt  --  lt input type  checkbox  ng-model  hideShow  ng-init  hideShow   false  gt  lt  input gt  -- gt    lt input type    button  value    Add Book ng-click  hideShow  hideShow   false   true   gt   lt  input gt        lt div ng-app    mainApp  ng-controller    bookController  ng-if  hideShow  gt               Enter book name   lt input type    text  ng-model    book name  gt  lt br gt               Enter book category   lt input type    text  ng-model    book category  gt  lt br gt               Enter book price   lt input type    text  ng-model    book price  gt  lt br gt               Enter book author   lt input type    text  ng-model    book author  gt  lt br gt                 You are entering book    book bookDetails           lt  div gt        lt script gt               var mainApp   angular module  mainApp                      mainApp controller  bookController   function  scope                     scope book                        name                         category                         price                        author                           bookDetails  function                           var bookObject                        bookObject    scope book                        return  Book name      bookObject name      n     Book category      bookObject category       n     Book price      bookObject price       n     Book Author      bookObject author                                                                 lt  script gt

User · Answer

If you have multiple Menus with Submenus  then you can go with the below solution   HTML             lt ul class  sidebar-menu  id  nav-accordion  gt                lt li class  sub-menu  gt                     lt a href    ng-click  hasSubMenu  dashboard    gt                         lt i class  fa fa-book  gt  lt  i gt                         lt span gt Dashboard lt  span gt                         lt i class  fa fa-angle-right pull-right  gt  lt  i gt                     lt  a gt                     lt ul class  sub  ng-show  showDash  gt                         lt li gt  lt a ng-class    active  isActive   dashboard loan     href    dashboard loan  gt Loan lt  a gt  lt  li gt                         lt li gt  lt a ng-class    active  isActive   dashboard recovery     href    dashboard recovery  gt Recovery lt  a gt  lt  li gt                     lt  ul gt                 lt  li gt                 lt li class  sub-menu  gt                     lt a href    ng-click  hasSubMenu  customerCare    gt                         lt i class  fa fa-book  gt  lt  i gt                         lt span gt Customer Care lt  span gt                         lt i class  fa fa-angle-right pull-right  gt  lt  i gt                     lt  a gt                     lt ul class  sub  ng-show  showCC  gt                         lt li gt  lt a ng-class    active  isActive   customerCare eligibility     href    CC eligibility  gt Eligibility lt  a gt  lt  li gt                         lt li gt  lt a ng-class    active  isActive   customerCare transaction     href    CC transaction  gt Transaction lt  a gt  lt  li gt                     lt  ul gt                 lt  li gt             lt  ul gt    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     rootScope isActive   function  viewLocation                     return viewLocation      location path                 The above function is used to add active class to the current menu item            rootScope showDash   false           rootScope showCC   false           var location    location url   split                if location 1      customerCare                 rootScope showCC   true                    else if location 1    dashboard                 rootScope showDash   true                      rootScope hasSubMenu   function menuType               if menuType   dashboard                     rootScope showCC   false                   rootScope showDash    rootScope showDash     false   true  false                            else if menuType   customerCare                     rootScope showDash   false                   rootScope showCC    rootScope showCC     false   true  false                            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   if location 1      customerCare                     rootScope showCC   true                            else if location 1    dashboard                     rootScope showDash   true                  it will remain the submenu open after reloading the page according to selected menu item   I have defined my pages like    routeProvider          when   dasboard loan                 controller   LoanController               templateUrl     views loan view html               controllerAs   vm               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

User · Answer

You just need to toggle the value of  isReplyFormOpen  on ng-click event   lt a ng-click  isReplyFormOpen    isReplyFormOpen  gt Reply lt  a gt    lt div ng-show  isReplyFormOpen  id  replyForm  gt      lt  div gt

User · Answer

Basically I solved it by NOT-ing the isReplyFormOpen value whenever it is clicked    lt a ng-click  isReplyFormOpen    isReplyFormOpen  gt Reply lt  a gt    lt div ng-init  isReplyFormOpen   false  ng-show  isReplyFormOpen  id  replyForm  gt       lt  -- Form -- gt   lt  div gt

User · Answer

If based on click here it is   ng-click  orderReverse   orderReverse   false   true

[javascript] How do I toggle an ng-show in AngularJS based on a boolean?

Examples related to javascript

Examples related to html

Examples related to angularjs

Examples related to ng-show