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
Post a Comment