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?
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?
Share Improve this question edited Nov 19, 2022 at 19:48 Daniel Widdis 9,13113 gold badges48 silver badges68 bronze badges asked Aug 1, 2013 at 12:29 Jade HamelJade Hamel 1,4201 gold badge16 silver badges30 bronze badges2 Answers
Reset to default 13I 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.
<button ng-click="isCollapsed=!isCollapsed">
<span ng-class="{'glyphicon glyphicon-plus': isCollapsed, 'glyphicon glyphicon-plus': !isCollapsed }"></span>
</button>