How to switch icon to button when crashing using 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 to

 <button class="btn" ng-click="isCollapsed = !isCollapsed"><i class="icon-resize-small"></i>Details</button> 

and return it with icon-fullscreen when minimized.

Is there an AngularJS way to do this?

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 will have the class icon-resize-small if isCollapsed is true, and icon-fullscreen if it is not. Here is the documentation .

When passing an object to key-value pairs in ngClass, the keys represent the classes that will be applied if their values ​​are evaluated as true.

Answer 2

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