Adding Classes to Elements using ng-click

Question

I have a list of <p> tags in my Angularjs appication that I would like to set an active class on when any of them are selected using the ng-click directive

<p ng-click="setActive()">Paragraph 1</p>
<p ng-click="setActive()">Paragraph 2</p>
<p ng-click="setActive()">Paragraph 3</p>

I've read one of the best ways to toggle an active class is to push each applicable object into an array and set the class by the array index; is their a simpler way to do this using html elements?

Note* these paragraphs will be rendered dynamically to the DOM as a result of an AJAX request

This code seems incomplete to understand your context.. Can you share executable demo/snippet or JSFiddle ? Create a Minimal, Complete, and Verifiable example — Rayon
– Rayon, Commented Jul 15, 2016 at 16:42
As @Rayon stated we need to know the context in order to assist. e.g. are these paragraphs being generated in a ngRepeat?? — Justin Herter
– Justin Herter, Commented Jul 15, 2016 at 16:47

Shintu Joseph · Accepted Answer · 2016-07-15 16:50:52Z

1

Use ngClass directive for this

  $scope.setActive = function(currentEl){
    $scope.currentEl = currentEl;
  };
<p ng-class="{ 'active' : currentEl == 'p1' }" ng-click="setActive('p1')">Paragraph 1</p>
<p ng-class="{ 'active' : currentEl == 'p2' }" ng-click="setActive('p2')">Paragraph 2</p>
<p ng-class="{ 'active' : currentEl == 'p3' }" ng-click="setActive('p3')">Paragraph 3</p>

answered Jul 15, 2016 at 16:50

Shintu Joseph

9627 silver badges19 bronze badges

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

1 Comment

Shintu Joseph Over a year ago

Pleasure is mine :)

Collectives™ on Stack Overflow

Adding Classes to Elements using ng-click

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related