current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have html like

  • one
  • two
  • tree

now on ng-click of every 'li' element I want to add class 'active' and remove from other 'li' elements. Also, if the same 'li' is clicked again then I want to remove class 'active'

share
    
From what does the list is created? is it static? is it created using ngRepeat? – Ron Dadon 15 mins ago
up vote 0 down vote

change your html like 

  <ul>
    <li ng-click='makeActive("one")' ng-class="{ 'active': active=='one'}">One</li>
    <li ng-click='makeActive("two")' ng-class="{ 'active': active=='two'}">Two</li>
    <li ng-click='makeActive("three")' ng-class="{ 'active': active=='three'}">Three</li>
  </ul>

and add new function 

$scope.makeActive = function(item) {
   if ($scope.active == item)
      $scope.active = '';
   else
    $scope.active = item
}

chekout the working fiddle

share

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.