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
– dnc253, Commented Apr 8, 2015 at 17:30

batmaniac7 · Accepted Answer · 2015-04-08 17:55:33Z

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 8, 2015 at 17:55

batmaniac7

4225 silver badges17 bronze badges

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

Comments

Naresh217 · Accepted Answer · 2015-04-08 17:51:48Z

0

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;

};

answered Apr 8, 2015 at 17:51

Naresh217

4201 gold badge7 silver badges23 bronze badges

Collectives™ on Stack Overflow

angular ng-click to change class on click

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related