How to addClass and removeClass with different element on AngularJS?

Question

I have this simple dom that I would like to achieve:

<header>
    <button class="open-btn></button>
</header>

<nav class="active">
    <button class="close-btn"></button>
</nav>

How do I achieve the simple addClass and removeClass function on Angular with separate element?

I've read up on Service, Factory, and Controller, it sounds quite confusing to me.

I've able to successfully used Controller to do add and remove class on the same controller, let's say open-btn and close-btn both under nav, but how about if I am using different element? What I've done seems quite wrong to me, is it the right way? Do I have to register it to Service/Factory instead?

Scenario:

When the user click on open-btn, the element nav will have a class of active, if the user click on close-btn, then nav will remove it's active button.

This seems so easy with jQuery, but how would I do it with Angular way?

What does relate to class should come up with ng-class

Quy
– Quy

2015-12-29 04:04:22 +00:00
Commented Dec 29, 2015 at 4:04 — Quy
– Quy, Commented Dec 29, 2015 at 4:04

Danny · Accepted Answer · 2015-12-29 04:05:57Z

1

You can have the buttons set a value in the scope, and then give the elements classes based on the value of that element using ng-class:

<header>
   <button class="open-btn" ng-click="isActive = true">Open</button>
</header>

<nav ng-class="{ 'active': isActive }">
   <button class="close-btn" ng-click="isActive = false">Close</button>
</nav>

From the ng-class documentation:

If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.

answered Dec 29, 2015 at 4:05

Danny

1,7583 gold badges23 silver badges36 bronze badges

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

5 Comments

whalesingswee Over a year ago

Hey Danny, this looks great, but I do have to add it to a single controller, correct?

Danny Over a year ago

Mmmmm...yes. I see you added in a comment that they do not have the same controller, but I think I would need to see more of your code to know how to handle the situation. It's not clear to me how the two controllers would be interacting. At first glance they look like two buttons on a single page (with me assuming a single controller).

whalesingswee Over a year ago

You are right, they both on the same page. I am having some confusion with organising controllers and when to use it, on this situation, I thought I should create a HeaderController and NavController, lol.

Danny Over a year ago

If you're explicitly doing it for a particular reason, then it is very likely overkill. The page or directive could quite possibly have a single controller that handles both buttons.

whalesingswee Over a year ago

great! thank you very much and that clears my mind. :)

Anik Islam Abhi · Accepted Answer · 2015-12-29 04:06:58Z

1

Angular has ngClass to add/remove class

Like this

ctrl

$scope.isOpen=false;

$scope.open=function(){
  $scope.isOpen=true;
}
$scope.close=function(){
  $scope.isOpen=false;
}

Html

<header>
    <button class="open-btn" ng-click="open()"></button>
</header>

<nav class="active" ng-class="{'active': isOpen }">
    <button class="close-btn" ng-click="close()"></button>
</nav>

answered Dec 29, 2015 at 4:06

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

2 Comments

Anik Islam Abhi Over a year ago

It has to be within it's context . Like there is only one controller then it has be same controller if there is nested controller then it has to be at least it self or it's parent . @draftdraft88

whalesingswee Over a year ago

Thanks Anik, I'd prefer your way of using function.

Collectives™ on Stack Overflow

How to addClass and removeClass with different element on AngularJS?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related