Manière AngularJS de changer le nom de la classe sur ng-click

Question

Je sais que c'est une bonne pratique de ne pas utiliser jQuery dans une application AngularJS, mais j'ai du mal à trouver la manière AngularJS de procéder :

$scope.clickEvent = function(event) {
    if($(event.target).hasClass('icon-closed')) {
        $(event.target).removeClass('icon-closed')
        $(event.target).addClass('icon-opened')
    } else {
        $(event.target).removeClass('icon-opened')
        $(event.target).addClass('icon-closed')
    }
}

Mon HTML :

<div class="component-title icon-closed" 
     ng-model="collapsed" 
     ng-click="collapsed=!collapsed;clickEvent($event)">{{component.name}}</div>

Le collapsed le code affiche/masque les panneaux, et le div est dans un ng-repeat boucle, donc rien à voir avec le clickEvent fonction.

J'espérais pouvoir obtenir les noms de classe de l'objet événement et les modifier sans utiliser jQuery.Des idées?

Merci :)

Answer 1

Vous pouvez utiliser le ngClass directive pour y parvenir.

<div class="component-title"
     ng-class="{'icon-closed':collapsed,'icon-opened':!collapsed}"
     ng-model="collapsed"
     ng-click="collapsed=!collapsed">{{component.name}}</div>

Plus d'informations sur ngClass peut être trouvé ici.