How to switch the icon on a button when collapsing with AngularJS?

javascript twitter-bootstrap angularjs collapse
Jade Hamel picture Jade Hamel · Aug 1, 2013 · Viewed 12.2k times · Source

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?

Answer

Elise picture Elise · Aug 1, 2013

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.

Related questions

How do display a collapsible tree in AngularJS + Bootstrap

I am building a web app where I need to display a tree using lists. My basic structure looks like this: * Node 1 * Node 1.1 * Node 1.1.1 * Node 1.1.1.1 * Node 1.1.2 * Node 1.2 http://jsfiddle.net/QffFm/1/ I'm trying to find something in angular or bootstrap …

Read More
Something like Bootstrap collapsible with angular

I'm building a small app and I'm using AngularJS. Inside the app I need a collapsible element and using Twitter Bootstrap would be as easy as adding the library and some tags on my target element and the trigger. But …

Read More
How to set bootstrap navbar active class with Angular JS?

If I have a navbar in bootstrap with the items Home | About | Contact How do I set the active class for each menu item when they are active? That is, how can I set class="active" when the angular route …

Read More