Wednesday, February 25, 2015

Angular.js Visible Toggle Button

From this post onward I am planning to blog more frequently with solutions for random issues I face along the day. These MicroPosts may not include much content, but will be direct and simplely answered solutions for issues. Hope these might save someone's time.

Not like jQuery, which has many toggle functions, As per my knowledge, Angular do not have any straight forward way to toggle the DOM. Many examples and fiddles I went through suggest unwanted coding stuff. I am not going to write a controller for a simple thing like this. Finally found a solution which worth mentioning. Hope following snippet is self explaining.


<button ng-model="isVisible"
        ng-init="isVisible = false" 
        ng-click="isVisible = !isVisible">
        {{ isVisible ? "Hide Section" : "Show Section"}}
</button>

<div ng-show="isVisible">
  <!-- content -->
</div>