Conditionally add class for everything clicked - angular

We have already discussed in the previous articles about adding a class and removing for clicked menu items. If you are interested please check those as well.

• Angular js add class to active element
• Add and remove active class on click Angular

Let us see how we can add class on all clicked elements in angular way. It is very simple just need minor changes in html.

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 ng-repeat="datalist in datalists" ng-click="clicked = true"
  ng-class="{active: clicked}" >
 <div>{{ datalist.name }}</div> 
</li>
</ul> 

Css

 .active{color : red;}

Click on 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. Disable submit button until all mandatory fields are filled - Angular

4. Toggle click on dynamic menu items - Angular