AngularJS toggle divs visibility through button -


i have multiple sets of 2 divs , button each per page. 2 divs contains alternating content button should handle switching visibility. can't seem think of angular solution can extensible multiple separate instances in page (my mind keeps wanting done in jquery).

i have created jsfiddel example here.

you see 2 divs p_table class <span class="trigger">a</span>. trigger should alternate 2 p_table inside parent div p_container.

the key how doing ng-class, can ng-show/ng-hide. both implementations require no javascript, controller scope.

ng-class: choose class based on variable, toggles on trigger click.

<div class="p_container">   <p class="p_table" ng-class="{hidden:!show,chaldean:show}">this actual content</p>   <p class="p_table" ng-class="{hidden:show,chaldean:!show}">this transliterated content</p>    <span class="trigger" ng-click="show=!show">a</span> </div> 

ng-show/ng-hide: show or hide on variable. typical way of doing it.

<div class="p_container">   <p class="p_table" ng-show="show">this actual content</p>   <p class="p_table" ng-hide="!show">this transliterated content</p>    <span class="trigger" ng-click="show=!show">a</span> </div> 

Comments

Popular posts from this blog

PHPMotion implementation - URL based videos (Hosted on separate location) -

javascript - Using Windows Media Player as video fallback for video tag -

c# - Unity IoC Lifetime per HttpRequest for UserStore -