add/remove class on >li> click in angularjs

Question

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'

From what does the list is created? is it static? is it created using ngRepeat? — Ron Dadon
– Ron Dadon, Commented Jan 22, 2017 at 6:59

Ebin Manuval · Accepted Answer · 2017-01-22 07:15:44Z

2

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

edited Jan 22, 2017 at 7:15

answered Jan 22, 2017 at 7:07

Ebin Manuval

1,25514 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

add/remove class on >li> click in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related