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

Question

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 1

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.

Answer 2

 <button ng-click="isCollapsed=!isCollapsed">
        <span   ng-class="{'glyphicon glyphicon-plus': isCollapsed, 'glyphicon glyphicon-plus': !isCollapsed }"></span>
      </button>