AngularJS way of changing class name on ng-click

Question

I know it is good practice to not use jQuery inside an AngularJS app, but struggling to work out the AngularJS way of doing this:

$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 collapsed code is showing/hiding panels, and the div is within an ng-repeat loop, so nothing to do with the clickEvent function.

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

Thanks :)

rtcherry · Accepted Answer · 2014-02-25 11:20:14Z

5

You can use the ngClass directive to achieve this.

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

More information on ngClass can be found here.

answered Feb 25, 2014 at 11:20

rtcherry

4,88024 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

WastedSpace Over a year ago

Brilliant - works! I did play around with ng-class, but never thought to use my 'collapsed' var with it. Simple really! Thanks a lot :) Still getting my head around AngularJS when I've been using jQuery for so long...

Collectives™ on Stack Overflow

AngularJS way of changing class name on ng-click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related