CODEWITHSUNDEEP
angularjs
ghetal
ghetal

Reputation: 403

add/remove class on >li> click in angularjs

I have html like

 <ul>
    <li>one</li>
    <li>two</li>
    <li>tree</li>
 </ul>

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'

Upvotes: 0

Views: 1541

Answers (1)

Ebin Manuval
Ebin Manuval

Reputation: 1255

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) {
   $scope.active = $scope.active == item?'':item;
}

chekout the working fiddle

Upvotes: 2

Related Questions