Toggle click on dynamic menu items - Angular

Let us check how we can add class to all clicked elements and to remove the same on another click. It is pretty straight forwarded in Angular js. In the previous articles I have explained about adding class on the active elements with different scenario. If interested you can check those as well.

• Angular js add class to active element
• Add and remove active class on click Angular
• Add a class for everything clicked - angular

Let us check how we can achieve this.

Sample Array

 $scope.datalists = [
    { "name": "Read about angular"},
    {"name": "Read about knockout"},
    {"name": "Read about backbone"},
    {"name": "Read about jquery"},
    {"name": "Read about javascript"}
 ]

Html

<ul>
 <li class="paginationclass" ng-repeat="datalist in datalists" ng-click="select(datalist)" 
 ng-class="{active: isActive(datalist)}">
 <div>{{ datalist.name }} </div> 
 </li>
</ul> 

Js

$scope.select= function(item) {
  this.selected = (this.selected === item ? null : item); 
};
$scope.isActive = function(item) {
  return this.selected === item;
};

CSS

 .active{color : red;}

Click the below link and see the result

Related Post

1. Angular js add class to active element

2. Add and remove active class on click Angular

3. Add a class for everything clicked - angular