Come cambiare l'icona su un pulsante quando si esegue il collasso con AngularJS?

Question

Ho questo tasto

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

E quando lo scatto sopra vorrei passare per

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

e tornare indietro con icon-fullscreen quando collasso.

Esiste un modo AngularJS per farlo?

Answer 1

Penso che questo potrebbe fare il trucco:

<button class="btn" ng-click="isCollapsed = !isCollapsed"> 
    <i ng-class="{'icon-resize-small': isCollapsed, 'icon-fullscreen': !isCollapsed}"></i>Details 
</button> 

In questo caso, il vostro i avrebbe dovuto classe icon-resize-small quando isCollapsed è vero, e icon-fullscreen quando non è vero. Ecco lo documentation.

Quando si passa un oggetto di coppie chiave-valore a ngClass, le chiavi rappresentano le classi che verranno applicate se i valori valgono su true.

Answer 2

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