How to check if element has class with AngularJS?
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!!
angularjs menu
asked Jan 17 '14 at 17:58
Eric MitjansEric Mitjans
1,04352653
add a comment |
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!!
angularjs menu
asked Jan 17 '14 at 17:58
Eric MitjansEric Mitjans
1,04352653
add a comment |
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!!
angularjs menu
asked Jan 17 '14 at 17:58
Eric MitjansEric Mitjans
1,04352653
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!!
angularjs menu
angularjs menu
asked Jan 17 '14 at 17:58
Eric MitjansEric Mitjans
1,04352653
asked Jan 17 '14 at 17:58
Eric MitjansEric Mitjans
1,04352653
asked Jan 17 '14 at 17:58
Eric MitjansEric Mitjans
1,04352653
asked Jan 17 '14 at 17:58
Eric MitjansEric Mitjans
1,04352653
asked Jan 17 '14 at 17:58
Eric MitjansEric Mitjans
1,04352653
1,04352653
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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
answered Jan 17 '14 at 18:15
MindstormyMindstormy
469413
2
Asking for an inline way of detecting class within the ng-click
– efwjames
Feb 29 '16 at 3:35
this link does not work anymore
– Diego
Nov 14 '18 at 8:30
add a comment |
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 '15 at 11:11
vidriduchvidriduch
3,71753650
5
This should be the accepted answer!
– Maria Ines Parnisari
Nov 12 '15 at 18:29
6
no need to useangular.element(myElement),myElement.hasClass(...)is enough.
– morels
Mar 10 '16 at 10:06
No Dot! Thank you!
– R Claven
Jan 26 '17 at 22:54
1
angular.element()is useful for cases like:const el = document.getElementById(id); angular.element(el).hasClass(...);
– doublesharp
Oct 13 '17 at 20:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f21192705%2fhow-to-check-if-element-has-class-with-angularjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Jan 17 '14 at 18:15
MindstormyMindstormy
469413
2
Asking for an inline way of detecting class within the ng-click
– efwjames
Feb 29 '16 at 3:35
this link does not work anymore
– Diego
Nov 14 '18 at 8:30
add a comment |
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
answered Jan 17 '14 at 18:15
MindstormyMindstormy
469413
2
Asking for an inline way of detecting class within the ng-click
– efwjames
Feb 29 '16 at 3:35
this link does not work anymore
– Diego
Nov 14 '18 at 8:30
add a comment |
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
answered Jan 17 '14 at 18:15
MindstormyMindstormy
469413
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
answered Jan 17 '14 at 18:15
MindstormyMindstormy
469413
edited Nov 15 '18 at 13:58
answered Jan 17 '14 at 18:15
MindstormyMindstormy
469413
answered Jan 17 '14 at 18:15
MindstormyMindstormy
469413
answered Jan 17 '14 at 18:15
MindstormyMindstormy
469413
469413
2
Asking for an inline way of detecting class within the ng-click
– efwjames
Feb 29 '16 at 3:35
this link does not work anymore
– Diego
Nov 14 '18 at 8:30
add a comment |
2
Asking for an inline way of detecting class within the ng-click
– efwjames
Feb 29 '16 at 3:35
this link does not work anymore
– Diego
Nov 14 '18 at 8:30
2
2
Asking for an inline way of detecting class within the ng-click
– efwjames
Feb 29 '16 at 3:35
Asking for an inline way of detecting class within the ng-click
– efwjames
Feb 29 '16 at 3:35
this link does not work anymore
– Diego
Nov 14 '18 at 8:30
this link does not work anymore
– Diego
Nov 14 '18 at 8:30
add a comment |
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 '15 at 11:11
vidriduchvidriduch
3,71753650
5
This should be the accepted answer!
– Maria Ines Parnisari
Nov 12 '15 at 18:29
6
no need to useangular.element(myElement),myElement.hasClass(...)is enough.
– morels
Mar 10 '16 at 10:06
No Dot! Thank you!
– R Claven
Jan 26 '17 at 22:54
1
angular.element()is useful for cases like:const el = document.getElementById(id); angular.element(el).hasClass(...);
– doublesharp
Oct 13 '17 at 20:38
add a comment |
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 '15 at 11:11
vidriduchvidriduch
3,71753650
5
This should be the accepted answer!
– Maria Ines Parnisari
Nov 12 '15 at 18:29
6
no need to useangular.element(myElement),myElement.hasClass(...)is enough.
– morels
Mar 10 '16 at 10:06
No Dot! Thank you!
– R Claven
Jan 26 '17 at 22:54
1
angular.element()is useful for cases like:const el = document.getElementById(id); angular.element(el).hasClass(...);
– doublesharp
Oct 13 '17 at 20:38
add a comment |
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 '15 at 11:11
vidriduchvidriduch
3,71753650
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 '15 at 11:11
vidriduchvidriduch
3,71753650
answered Apr 8 '15 at 11:11
vidriduchvidriduch
3,71753650
answered Apr 8 '15 at 11:11
vidriduchvidriduch
3,71753650
answered Apr 8 '15 at 11:11
vidriduchvidriduch
3,71753650
3,71753650
5
This should be the accepted answer!
– Maria Ines Parnisari
Nov 12 '15 at 18:29
6
no need to useangular.element(myElement),myElement.hasClass(...)is enough.
– morels
Mar 10 '16 at 10:06
No Dot! Thank you!
– R Claven
Jan 26 '17 at 22:54
1
angular.element()is useful for cases like:const el = document.getElementById(id); angular.element(el).hasClass(...);
– doublesharp
Oct 13 '17 at 20:38
add a comment |
5
This should be the accepted answer!
– Maria Ines Parnisari
Nov 12 '15 at 18:29
6
no need to useangular.element(myElement),myElement.hasClass(...)is enough.
– morels
Mar 10 '16 at 10:06
No Dot! Thank you!
– R Claven
Jan 26 '17 at 22:54
1
angular.element()is useful for cases like:const el = document.getElementById(id); angular.element(el).hasClass(...);
– doublesharp
Oct 13 '17 at 20:38
5
5
This should be the accepted answer!
– Maria Ines Parnisari
Nov 12 '15 at 18:29
This should be the accepted answer!
– Maria Ines Parnisari
Nov 12 '15 at 18:29
6
6
no need to use
angular.element(myElement), myElement.hasClass(...) is enough.– morels
Mar 10 '16 at 10:06
no need to use
angular.element(myElement), myElement.hasClass(...) is enough.– morels
Mar 10 '16 at 10:06
No Dot! Thank you!
– R Claven
Jan 26 '17 at 22:54
No Dot! Thank you!
– R Claven
Jan 26 '17 at 22:54
1
1
angular.element() is useful for cases like: const el = document.getElementById(id); angular.element(el).hasClass(...);– doublesharp
Oct 13 '17 at 20:38
angular.element() is useful for cases like: const el = document.getElementById(id); angular.element(el).hasClass(...);– doublesharp
Oct 13 '17 at 20:38
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f21192705%2fhow-to-check-if-element-has-class-with-angularjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
