Geek asks and answers

Angular way to change class name to ng-click

I know that it’s good practice not to use jQuery inside an AngularJS application, but I am struggling to work out an AngularJS way:

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

My HTML:

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

The code collapsedshows / hides the panels, and the div is in a loop ng-repeat, so nothing happens to the function clickEvent.

I was hoping I could get the class names from the event object and change them without using jQuery. Any ideas?

Thank:)

+3
source share
1 answer

You can use the directive to achieve this ngClass.

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

More information about ngClasscan be found here .

+5
source

More articles:


All Articles