How to set active class on ng-click?

Question

I have this:

<div class="account-item">
    <div class="account-heading" ng-class="active">
        <h4 class="account-title">
            <a href="#/Messages"  onclick="SetActiveAccountHeading(this);">
            7.    @Translate("SYSTEM_MESSAGES")</a>
        </h4>
    </div>
    </div>
    <div class="account-item">
       <div class="account-heading" ng-class="active">
           <h4 class="account-title">
              <a href="#/Info"  onclick="SetActiveAccountHeading(this);">
              7.    @Translate("SYSTEM_INFO")</a>
           </h4>
      </div>
   </div>

In angular i have this:

$scope.active = "active";

but how can i change this on click so if user click on menu once it would be active if again click it would be NOT active?

for u http://plnkr.co/edit/nbMNSSMsWomoFJZi4XZd?p=preview :) — Kalhan.Toress, Jun 22 '15 at 08:59
what if i have more menus? then every will be selected on click am i right? — None, Jun 22 '15 at 09:12
how can i change that so if i have multiple menus that selected just that one that i clicked?? :) — None, Jun 22 '15 at 09:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/81158/discussion-between-none-and-k-toress). — None, Jun 22 '15 at 09:24
@None Try my answer below with cleaner code and working jsfiddle link: http://stackoverflow.com/questions/30975718/how-to-set-active-class-on-ng-click/30975988#30975988 — Alberto I.N.J., Jun 22 '15 at 10:10

score 48 · Accepted Answer · edited Nov 03 '17 at 17:37

Ok say you have multiple menu items and you want to toggle the class according to click,

you can create a array in the controller which represents the menu items as,

$scope.menuItems = ['Home', 'Contact', 'About', 'Other'];

assign the default selected ,menu item

$scope.activeMenu = $scope.menuItems[0];

create a function to assign the selected Menu value, this function will assign the $scope.activeMenu a last selected menu item.

 $scope.setActive = function(menuItem) {
    $scope.activeMenu = menuItem
 }

in HTML

loop through the menuItems array and create the menu.

in the ng-class check last clicked menu item is equal to item in the repeat.

if click on the menu then call setActive() function in the controller and pass the menu item name as an argument.

<div class="account-item" ng-repeat='item in menuItems'>
   <div class="account-heading" ng-class="{active : activeMenu === item}">
      <h4 class="account-title">
        <a href="#/Messages" ng-click="setActive(item)"> {{ item }}</a>
      </h4>
   </div>
</div>

here is the DEMO

here is a DEMO without ng-repeat

How would you do this if instead of menu items being a list of strings, it were a list of objects? AFAIK you can't do a `===` compare on objects. — dwjohnston, Jan 18 '16 at 21:09
Also- can you explain what this syntax is? `ng-class="{active : activeMenu === item}"` — dwjohnston, Jan 18 '16 at 21:10
Hmmm this answer here is related: http://stackoverflow.com/questions/20902583/angularjs-best-practices-on-adding-an-active-class-on-click-ng-repeat — dwjohnston, Jan 18 '16 at 21:14

score 11 · Answer 2 · answered Jun 22 '15 at 09:02

This is what you need.

<div class="account-item" ng-init="active = true">
  <div class="account-heading" ng-class="{'active': active === true}" ng-click="active = !active">
    <h4 class="account-title">
        <a href="#/Messages">7.    @Translate("SYSTEM_MESSAGES")</a>
    </h4>
  </div>
</div>

No other scripting. +1 if it helps.

score 6 · Answer 3 · answered Jul 09 '17 at 04:32

6

Angular4:

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

<a [routerLink]="['calendar']" routerLinkActive="active">

Documentation: https://angular.io/api/router/RouterLinkActive

answered Jul 09 '17 at 04:32

Dawit

591
8
24

score 5 · Answer 4 · answered Mar 11 '16 at 02:39

5

If you are using [ui-router] you not need to write anything just you have add this ui-sref-active="active-menu" property in your tag which you want to active after click/navigate.

answered Mar 11 '16 at 02:39

Tameshwar

789
1
10
17

how i can add this and where ? – MD Ashik Jul 24 '16 at 22:03
1

Home – Tameshwar Jul 25 '16 at 01:37

Alberto I.N.J. · Answer 5 · 2015-06-22T09:18:28.310

For cleaner code try this:

<div class="account-item" ng-init="active = true">
  <div class="account-heading" ng-class="{'active': active}">
    <h4 class="account-title">
        <a href="#/Messages" ng-click="active = !active">7. @Translate("SYSTEM_MESSAGES")</a>
    </h4>
  </div>
</div>

You can remove the onclick event SetActiveAccountHeading(this);.

Here's the JsFiddle link.

You can view the result in the developer's console.

Hope it helps.

How to set active class on ng-click?

5 Answers5

Linked