AngularJS-способ изменения имени класса при нажатии ng-click

Question

Я знаю, что это хорошая практика - не использовать jQuery внутри приложения AngularJS, но изо всех сил пытаюсь найти способ сделать это с помощью AngularJS:

$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')
    }
}

Мой HTML:

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

То collapsed код показывает/скрывает панели, а div находится внутри ng-repeat цикл, так что ничего общего с clickEvent функция.

Я надеялся, что смогу получить имена классов из объекта event и изменить их без использования jQuery.Есть какие-нибудь идеи?

Спасибо :)

Answer 1

Вы можете использовать ngClass директива для достижения этой цели.

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

Более подробная информация о ngClass можно найти здесь.