How do I add a class on click to a parent element in AngularJS?

Question

My HTML is as follows:

<div class="cell">
  <div class="offset-container pull-left">
    <i data-ng-click="doCtrlStuff()"></i>
  </div>
</div>

When you click the <i>, I want to add an active class to the parent that has .cell currently. How is this doable with AngularJS?

Just a quick word of advice: next time don't ask 1 question and then ask yet another in some comments, especially when you seem to already know you had 2 questions. Put them all in the original post so that people can help you easier. — Buu
– Buu, Commented Oct 5, 2013 at 15:41

NicolasMoise · Accepted Answer · 2017-02-21 21:15:15Z

6

OK, according to your last comment, if your cells are in a loop you should have mentioned that in your question. I'm gonna assume you use ng-repeat.

I have something like this which works. The active class also get removed if you click another.

HTML:

<div ng-repeat="cell in [0,1,2]" data-ng-class="{cell:true, active:index=='{{$index}}'}">
    <div class="offset-container pull-left">
        <i data-ng-click="activate($index)">Activate Me</i>
    </div>
</div>

Controller:

  $scope.activate= function(index){
      $scope.index=index;
  };

edited Feb 21, 2017 at 21:15

answered Oct 4, 2013 at 16:33

NicolasMoise

7,27910 gold badges47 silver badges65 bronze badges

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

3 Comments

Syed Over a year ago

@NicolasMose is there a way to remove active class if clicked the same button again (toggle class - add and remove)?

Syed Over a year ago

@NicolasMose I did the changes to your code as I requested to you above. I got it answered here: stackoverflow.com/questions/38620253/…

HardikT Over a year ago

This works correctly, just that instead of activate('{{$index}}') it would be activate($index)

kmdsax · Accepted Answer · 2013-10-04 16:09:31Z

2

Here is one way, using ng-class

<div class="cell" ng-class="{'active': isActive==true}">
  <div class="offset-container pull-left">
    <i data-ng-click="doCtrlStuff()">clicky</i>     
  </div>
</div>

controller:

function MyCtrl($scope) {
    $scope.doCtrlStuff = function(){
        $scope.isActive = true;
    }             
}

answered Oct 4, 2013 at 16:09

kmdsax

1,3619 silver badges12 bronze badges

2 Comments

Shamoon Over a year ago

How can I set all of the other cell's to not be active when one is clicked?

kmdsax Over a year ago

Depends on how your code is setup. Can you add to your sample code so that we can see exactly what you are trying to accomplish?

Max · Accepted Answer · 2013-10-04 16:06:15Z

0

<div class="cell" ng-class="{'active': isActive}">
  <div class="offset-container pull-left">
    <i data-ng-click="isActive = !isActive"></i>
  </div>
</div>

answered Oct 4, 2013 at 16:06

Max

1,1509 silver badges13 bronze badges

Comments

programmerdave · Accepted Answer · 2013-10-04 16:21:59Z

0

You can do this from here: http://docs.angularjs.org/api/ng.directive:ngClass

<div data-ng-class="{cell:true, active:clickedIcon}">
  <div class="offset-container pull-left">
    <i data-ng-click="doCtrlStuff()"></i>
  </div>
</div>

You would use a class:boolean pattern for the ng-class expression.

And in your controller:

$scope.doCtrlStuff = function() {
    $scope.clickedIcon = true;
}

UPDATE:

If you want to do a radio button:

<div data-ng-class="{cell:true, active:clickedDogIcon}">
  <div class="offset-container pull-left">
    <i data-ng-click="doDogStuff()"></i>
  </div>
</div>
<div data-ng-class="{cell:true, active:clickedCatIcon}">
  <div class="offset-container pull-left">
    <i data-ng-click="doCatStuff()"></i>
  </div>
</div>

$scope.doDogStuff = function() {
    $scope.clickedDogIcon = true;
    $scope.clickedCatIcon = false;
}
$scope.doCatStuff = function() {
    $scope.clickedDogIcon = false;
    $scope.clickedCatIcon = true;
}

edited Oct 4, 2013 at 16:21

answered Oct 4, 2013 at 16:11

programmerdave

1,2581 gold badge11 silver badges17 bronze badges

5 Comments

Shamoon Over a year ago

How can I remove the active class from all other cells?

programmerdave Over a year ago

I would have a different variable for each parent. So you can do clickedIcon1, clickedIcon2, etc... and set the others to false so that ng-class will remove that class when they are false.

Shamoon Over a year ago

The cells are in a loop. So I can't do the 1, 2, 3, etc approach

programmerdave Over a year ago

If it's in a loop, then you might just want to do jqlite (which is part of Angular) or jquery selectors using addClass & removeClass.

NicolasMoise Over a year ago

Yes this last part is really bad practice and could get very messy very quickly. What if you have 10 different cells. Yo would need 10 different functions each changing 10 variables.

Collectives™ on Stack Overflow

How do I add a class on click to a parent element in AngularJS?

4 Answers 4

3 Comments

2 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related