Issue
I have this button
<button class="btn" ng-click="isCollapsed = !isCollapsed"><i class="icon-fullscreen"></i>Details</button>
And when I click on it I would like to switch for
<button class="btn" ng-click="isCollapsed = !isCollapsed"><i class="icon-resize-small"></i>Details</button>
and get it back with icon-fullscreen
when collapsing.
Is there an AngularJS way to do it?
Solution
I think this might do the trick:
<button class="btn" ng-click="isCollapsed = !isCollapsed">
<i ng-class="{'icon-resize-small': isCollapsed, 'icon-fullscreen': !isCollapsed}"></i>Details
</button>
In this case, your i
would have the class icon-resize-small
when isCollapsed
is true, and icon-fullscreen
when it's not true. Here is the documentation.
When passing an object of key-value pairs to ngClass, the keys represent classes which will be applied if their values evaluate to true.
Answered By - Elise
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.