Monday 27 February 2017

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.

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

3 comments :

  1. Simple one, thanks

    ReplyDelete
  2. But what if I need to remove the class on clcik on the same link again ?

    ReplyDelete
    Replies
    1. Yes for that need some changes, but it is straight forwarded,please see this link
      http://www.angulartutorial.net/2017/02/toggle-click-on-dynamic-menu-items.html

      Delete