Wie wird ngClass basierend auf dem Bootstrap-Kollaps gesetzt?

Question

Ich benutze collapse plugin von Bootstrap, und ich möchte auch die Klasse für ein anderes Element entsprechend ändern (ändern Klasse der Fa-Symbol). Ich benutze AngularJS auch, und ich mochte die Idee in ngClass wie diese mit Bedingung:

<i ng-class="collapsableItemId.hasClass('in') ? 'fa-chevron-up' : 'fa-chevron-down'"> 

Wenn Artikel nicht kollabierten Bootstrap ist fügt in Klasse zu. Ich möchte versuchen, das Symbol basierend auf der Klassenpräsenz in einem kollabierbaren Element zu ändern, habe es aber nicht geschafft. Im Bootstrap-Handbuch wird auch erwähnt, dass der Kollaps events generiert, den ich wahrscheinlich verwenden könnte, aber ich weiß auch nicht wie.

Answer 1

Es sollte so funktionieren. Verwenden Sie ng-click auf dem collapse Kippelement auf einen anderen Rahmen var zu ändern und dann diese var verwenden im ng-class des Symbols ..

<a href="" data-toggle="collapse" data-target=".collapse" ng-click="isOpen=!isOpen"> 
    <i class="fa" ng-class="(isOpen) ? 'fa-chevron-up' : 'fa-chevron-down'"></i> 
    </a> 
    <div class="collapse in"> 
    I'm the collapsible element. 
    </div> 

http://www.bootply.com/nqLf22HCli

Answer 2

<i ng-class="{'fa-chevron-up': abc.isOpen ,'fa-chevron-down': !abc.isOpen }"></i><div ng-show="abc.isOpen">Hi..This div will be show hide and icon will be change accordingly</div> 

Verwendung ng Sie auf Kopf kollabiert und setzen das div, das Sie reduzieren möchten add ng-show = "abc.isOpen".