CODEWITHSUNDEEP
angularjs
user244394
user244394

Reputation: 13448

angular ng-click to change class on click

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>

Upvotes: 0

Views: 1539

Answers (2)

batmaniac7
batmaniac7

Reputation: 422

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.

Upvotes: 1

Naresh217
Naresh217

Reputation: 420

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;

};

Upvotes: 0

Related Questions