How to check if element has class with AngularJS?

Question

I have an off panel menu working perfectly on a site. The user can open and close it using both a navicon or sliding it with the finger.

Right now I have a very nice navicon icon that transitions from Menu Icon to X Icon when is clicked (and opens the menu) and the other way around when is clicked again and the menu closes. Buuut if the user slides the menu open or closed instead of using the navicon, the transition is not triggered, which might lead to confusions on the UX (i.e. the menu being closed, and the navicon showing an X instead of the regular 3 horizontal lines icon).

So, the navicon has right now the following code to trigger the transition:

ng-click="open = !open" ng-class="{'open-mob':open}">

I thought that a nice and easy way to fix this, would be to trigger this "open = !open" every time that the menu is open or closed, as the js from the off panel adds the class slidRight to the main section when the menu is open, and removes it when it is closed.

Being so, is there some straight way to check if the class is there using AngularJS? Something like if class = slidRight -> "open = !open".

Thanks!!

vidriduch · Accepted Answer · 2015-04-08 11:11:22Z

91

for those (including me) who could not get their head around Angular's documentation, here is an example which worked for me:

angular.element(myElement).hasClass('my-class');

angular.element(myElement).addClass('new-class');

angular.element(myElement).removeClass('old-class');

hope this help someone ...

answered Apr 8, 2015 at 11:11

vidriduch

4,8738 gold badges45 silver badges66 bronze badges

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

2 Comments

morels Over a year ago

no need to use angular.element(myElement), myElement.hasClass(...) is enough.

doublesharp Over a year ago

angular.element() is useful for cases like: const el = document.getElementById(id); angular.element(el).hasClass(...);

Mindstormy · Accepted Answer · 2018-11-15 13:58:37Z

22

Angular uses jqLite's .hasClass() natively.

Read here on the angular docs for more info.

~~http://docs.angularjs.org/api/angular.element~~

https://docs.angularjs.org/api/ng/function/angular.element

edited Nov 15, 2018 at 13:58

answered Jan 17, 2014 at 18:15

Mindstormy

4904 silver badges15 bronze badges

1 Comment

ericjam Over a year ago

Asking for an inline way of detecting class within the ng-click

Collectives™ on Stack Overflow

How to check if element has class with AngularJS?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related