How to check if element has class with AngularJS?

angularjs menu
Eric Mitjans picture Eric Mitjans · Jan 17, 2014 · Viewed 87.2k times · Source

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!!

Answer

vidriduch picture vidriduch · Apr 8, 2015

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 ...

Related questions

if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More
How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful. What I don't understand specifically: Are they connected to the DOM? How can I update DOM changes to the model? What is the connection …

Read More
AngularJS ngClass conditional

Is there any way to make an expression for something like ng-class to be a conditional? For example, I have tried the following: <span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span> The issue with this …

Read More