如何在與AngularJS摺疊時切換按鈕上的圖標？

我有這個按鈕如何在與AngularJS摺疊時切換按鈕上的圖標？

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

當我點擊它，我想開關

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

和摺疊時與icon-fullscreen它找回來。

有沒有AngularJS的方法來做到這一點？

來源

2013-08-01 Charles Hamel

我想這可能做的伎倆：

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

在這種情況下，您的i將有類icon-resize-small時isCollapsed是真實的，icon-fullscreen當它是不正確的。這裏是documentation。

將鍵值對的對象傳遞給ngClass時，這些鍵表示如果它們的值計算結果爲真時將應用的類。

來源

2013-08-01 12:35:06 Elise

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

來源

2016-03-09 14:41:40 kupaff

請[edit]提供更多信息。只有代碼和「試試這個」的答案是[不鼓勵]（// meta.stackexchange.com/questions/196187），因爲它們不包含可搜索的內容，也不能解釋爲什麼有人應該「試試這個」。我們在這裏努力成爲知識的資源。 – Mogsdad

*註釋中的說明*您需要執行此操作的方法很多，根據您使用此功能的位置，我列出了四種可能的使用方法。如果你在指令中這樣做，那麼代碼將如下所示看起來不同。如果你想添加一些圖標變化中包含的功能，那麼我在我的評論中列出了一些場景。對我來說，當我這樣做時，我需要一個擴展面板的功能，那就是我有「somefunction（）」的地方。就像我根據你的需要說的，這裏有一些場景。 – kupaff

評論是暫時的，並且不包含在搜索結果中，因此最好是添加該信息的答案。（這將是一個很好的答案，順便說一句！） – Mogsdad

如何在與AngularJS摺疊時切換按鈕上的圖標？

回答

相關問題