Angularjs - ng-click and ng-show to show a div

Question

I am trying just to display a div when user press a button  seems to be easy  but after spent a lot of time I am getting really crazy with this  My code is   My fiddle  http   jsfiddle net jmhostalet 4WK7R 1    lt div ng-app gt       lt div ng-controller  MyCtrl  gt           lt div gt  lt button id  mybutton  ng-click  showAlert    gt Click me lt  button gt  lt  div gt           lt div gt Value    myvalue   lt  div gt           lt div gt  lt div ng-show  myvalue  class  hideByDefault  gt Here I am lt  div gt  lt  div gt       lt  div gt   lt  div gt    and my controller  function MyCtrl  scope        scope myvalue   false      scope showAlert   function         scope myvalue   true             Thank you

User · Answer

Just remove css from your js fiddle use the myvaue     true     lt div ng-show  myvalue    true  class  ng-cloak  gt Here I am lt  div gt

User · Answer

Just remove css from your js fiddle  ng-show will controll it  AngularJS sets the display style to none  using an  important flag   And remove this class when it must be shown

User · Answer

lt html gt   lt head gt       lt title gt  lt  title gt   lt  head gt   lt body gt       lt script type  text javascript  src  https   ajax googleapis com ajax libs angularjs 1 3 9 angular min js  gt  lt  script gt       lt script type  text javascript  gt          var app   angular module  MyApp               app controller  MyController   function   scope                  This will hide the DIV by default               scope IsVisible   false               scope ShowHide   function                        If DIV is visible it will be hidden and vice versa                   scope IsVisible    scope IsVisible   false   true                                 lt  script gt       lt div ng-app  MyApp  ng-controller  MyController  gt           lt input type  button  value  Show Hide DIV  ng-click  ShowHide      gt           lt br   gt           lt br   gt           lt div ng-show    IsVisible  gt My DIV lt  div gt       lt  div gt   lt  body gt   lt  html gt    EXAMPLE   - http   jsfiddle net mafais 4WK7R 380

User · Answer

Very simple just do this    lt button ng-click  hideShow  hideShow   false   true   gt Toggle lt  button gt    lt div ng-if  hideShow  gt hide and show content     lt  div gt

User · Answer

This will solve the problem  No need to write code in controller  And remove your css styles display none   lt div gt  lt button id  mybutton  ng-click  myvalue true  gt Click me lt  button gt  lt  div gt

User · Answer

Just get rid of the display  none  from your CSS  AngularJS is in control of showing hiding that div   If you want to hide it by default  just set the value of scope myvalue to false initially - which you re already doing

User · Answer

I think you can create expression to show or hide   lt div ng-app gt       lt div ng-controller  MyCtrl  gt           lt div gt  lt button id  mybutton  ng-click  myvalue   myvalue    true   false   true   gt Click me lt  button gt  lt  div gt           lt div gt Value    myvalue   lt  div gt           lt div gt  lt div ng-show  myvalue  class  hideByDefault  gt Here I am lt  div gt  lt  div gt       lt  div gt   lt  div gt

User · Answer

If you want to make sure your div is not visible by default use ng-cloak class instead  It will work properly with ngShow directive    lt div gt  lt div ng-show  myvalue  class  ng-cloak  gt Here I am lt  div gt  lt  div gt    Demo  http   jsfiddle net 4WK7R 4

User · Answer

I implemented it something this way  Controller function   app controller  aboutController   function    this selected   true  this toggle   function      this selected   this selected false true          HTML    lt div ng-controller  aboutController as about  gt    lt div ng-click  about toggle    gt Click Me to toggle the Fruits Name lt  div gt    lt div ng-show   about selected  gt Apple is a delicious fruit lt  div gt   lt  div gt

User · Answer

remove class hideByDefault  Div will remain hidden itself till value of myvalue is false

User · Answer

You can use the ng-class tag  Have a look http   jsfiddle net 4WK7R 3

[javascript] Angularjs -> ng-click and ng-show to show a div

Examples related to javascript

Examples related to angularjs