angular ng-click to change class on click

Question

I am trying to remove all classes "fa-3x " and change all classes to "fa-lg" and add a class called="testClass", when the user click on class toggle-button. is it possible to do it in angular? really appreciate. your help

I know in jquery it very simple using add class and removeClass. can someone show me How to do it in angular?

  <div ng-controller="MainContainerController" ng-Click="toggleClass()">
        <ul class="nav" >
            <li>
                <a class="toggle-button"><i class="fa fa-exchange"></i></a>
            </li>
            <li>
                <a ui-sref="Home" ng-class="ActiveMenu('Home')">
                   <i class="fa fa-home fa-3x"></i>
                   <span>Home</span>
                </a>
            </li>
            <li>
                <a ng-class="ActiveMenu('Work')"> 
                   <i class="fa fa-bar-chart-o fa-3x"></i>
                   <span>Work </span>
                </a>
            </li>
            <li>
                <a ui-sref="Music" ng-class="ActiveMenu('Music')">
                   <i class="fa fa-table fa-3x"></i>
                   <span>Scenario <br/>Music</span>
                </a>
            </li>
            <li>
                <a ui-sref="faq">
                   <i class="fa fa-faq fa-3x"></i>                           
                   <span>Faq</span> 
                </a>
            </li>
       </ul>
  </div>

I was going to recommend taking a look at `ng-class`, but you're already using that on a different element. That's the directive to use for dynamically setting classes based on model values. — dnc253, Apr 08 '15 at 17:30
look at this entry http://stackoverflow.com/questions/20460369/adding-and-removing-classes-in-angularjs-using-ng-click — patovega, Apr 08 '15 at 17:33

score 1 · Answer 1 · answered Apr 08 '15 at 17:55

1

Instead of using a function, I would recommend to use ng-class="{class1:(someVariable=='Workbench')} ng-class="{class2:(someVariable=='Music')}" While in function toggleClass() you can setup someVariable to 'Home', 'Workbench' etc.

answered Apr 08 '15 at 17:55

batmaniac7

422
5
17

score 0 · Answer 2 · answered Apr 08 '15 at 17:51

user can use ng-class directive

<div  ng-click="changeClass()">
    <p ng-class="{'clicked':clicked,'not-clicked':!clicked}">Test</p>
    <p ng-class="{'clicked':clicked,'not-clicked':!clicked}">Test</p>

</div>
$scope.changeClass = function(){

    $scope.clicked = true;

};

angular ng-click to change class on click

2 Answers2