How to add class CSS after ng-click to parent element?

Question

There is HTML code:

<div>
  <span>
    <input ng-click="addClass()" type="checkbox"> 
  </span>
</div>

How I can add CSS class to parent element div after click at input?

I tried:

ng-click="addClass($event)"

Angular JS:

$scope.addClass = function (event){
   event.parent('div').addClass('active');
}

Pankaj Parkar · Accepted Answer · 2015-05-03 08:51:24Z

3

You could ng-class in your case, maintain a scope variable which will used in ng-class expression, there is no need to use jQuery while you have directive like ng-class which makes your life easy.

Markup

<div ng-class="{active: active}">
  <span>
    <input ng-click="active!= active" type="checkbox"> 
  </span>
</div>

edited May 3, 2015 at 8:51

answered May 3, 2015 at 8:45

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

5 Comments

Hamed Over a year ago

I use HTML template in ng-view here this code does not work. I get error: TypeError: g.setClass is not a function

Hamed Over a year ago

In console I see how is changed class without value

Pankaj Parkar Over a year ago

@Hamed you can not see the value changed in console..please come here chat.stackoverflow.com/rooms/76764/… I'll guid what exactly needs to do..

Hamed Over a year ago

I did like as:

<input type="checkbox" ng-model="formData.major">  <label class="checkbox-label" ng-class="{active: formData.major}"></label>

Pankaj Parkar Over a year ago

@Hamed could you please come on chat

Collectives™ on Stack Overflow

How to add class CSS after ng-click to parent element?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related