Jak zmienić ikonę przycisku podczas zwijania z AngularJS?

Question

mam tego przycisku

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

I po kliknięciu na nim chciałbym, aby przełączyć na

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

i dostać go z powrotem icon-fullscreen gdy zawaleniem.

Czy istnieje sposób AngularJS, aby to zrobić?

Answer 1

myślę, że może to zrobić trick:

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

W tym przypadku, twój i musiałby klasę icon-resize-small gdy isCollapsed jest prawdą, a icon-fullscreen gdy nie jest to prawdą. Oto documentation.

Podczas przekazywania obiektu pary klucz-wartość do ngClass, klawisze reprezentują klasy, które zostaną zastosowane, jeśli ich wartości są prawdziwe.

Answer 2

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