How to change the class using Angular js?

Question

In my app i have four tabs, on click of one tab a class name will be added, By using that class name CSS are written. I have implemented the same in jquery by adding the class on Tab click, but in angular I am finding it difficult, someone help me out in this.

HTML

     <div id="main-tabs">
          <div class="name-des">
            <h4>Hi Divya</h4>
            <p>As an admin what would you like to do today? </p>
          </div>
          <div class="allwindows " ng-style="updateMargin">
           <a href="#addpfm" class="viewawards">
            <p>Add PFM/GI</p>
            </a> 
            <a href="#/awards" class="addawards">
            <p>Manage Awards</p>
            </a> 
            <a  href="#/nomination" class="nomination">
            <p>Manage Nomination <br/>
              Window</p>
            </a> <a href="#/report" class="report">
            <p>Report</p>
            </a> 
            </div>

  <div ng-view class="reveal-animation animate-show"></div>
   </div>

SCRIPT

 app.controller('nominationController', function($scope) {
    changeTabs("yellow");
 });

  app.controller('awardsController',function($scope){
  changeTabs("green");
  });

   app.controller('reportController',function($scope){
    changeTabs("red");  
  });
  app.controller('addpfmController',function($scope){
  changeTabs("blue");   
   });
  app.controller('reportController',function($scope){
  changeTabs("red");    
  });

 function changeTabs(className){
  $("#main-tabs").attr("class", className);
  $('.name-des').hide( 3000 );
  }

Here is the function written in jquery. I need to replace this code with angular code, Someone help me out.

Thanks

Can you please create fiddle ?

ramamoorthy_villi
– ramamoorthy_villi

2015-02-25 05:36:32 +00:00
Commented Feb 25, 2015 at 5:36 — ramamoorthy_villi
– ramamoorthy_villi, Commented Feb 25, 2015 at 5:36

New Dev · Accepted Answer · 2015-02-25 05:54:28Z

1

You don't need this many controllers for this. A single controller is enough to handle this interaction.

.controller("MainCtrl", function($scope){
   $scope.className = "yellow"; // if you need a default
}

Then, in the view, you use ng-class to set the class and ng-click to set the className:

<div ng-controller="MainCtrl" ng-class="className">
  <div class="name-des">
    <h4>Hi Divya</h4>
    <p>As an admin what would you like to do today?</p>
  </div>
  <div class="allwindows " ng-style="updateMargin">
    <a href="#addpfm" class="viewawards" ng-click="className = 'blue'">
      <p>Add PFM/GI</p>
    </a>
    <a href="#/awards" class="addawards" ng-click="className = 'green'">
      <p>Manage Awards</p>
    </a>
    ...
  </div>
</div>

answered Feb 25, 2015 at 5:54

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

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

5 Comments

Divya MV Over a year ago

when we set className='blue' is that going to set the class as blue?

manoji stack Over a year ago

@New Dev On clicking on that the class is adding but again clicking on another <a> tag, the class is getting appending. but actually if it is in "red" class then on click of another tab it should change to another color like "blue" br removing "red".

New Dev Over a year ago

@manojistack, you are doing something wrong then. ng-class="className" will set the class to whatever className equals to - not append it

manoji stack Over a year ago

@New Dev No it has not solved so only dint give you up for your answer, or else regularly ill give up for when ever i got answer, sorry yaar.

New Dev Over a year ago

@manojistack, this is working for me - plnkr.co/edit/OotO3BRtuUZMcg7FIrKR?p=preview. tell me where you have the problem

Hareesh · Accepted Answer · 2015-02-25 05:46:06Z

From what i understood You can use ng-click

<div id="main-tabs" ng-controller="myController">
      <div class="name-des">
        <h4>Hi Divya</h4>
        <p>As an admin what would you like to do today? </p>
      </div>
      <div class="allwindows " ng-style="updateMargin">
       <a href="#addpfm" ng-click="changeTabs('yourColor')" class="viewawards">
        <p>Add PFM/GI</p>
        </a> 
        <a href="#/awards" ng-click="changeTabs('yourColor')" class="addawards">
        <p>Manage Awards</p>
        </a> 
        <a  href="#/nomination" ng-click="changeTabs('yourColor')" class="nomination">
        <p>Manage Nomination <br/>
          Window</p>
        </a> <a href="#/report" ng-click="changeTabs('yourColor')" class="report">
        <p>Report</p>
        </a> 
        </div>

 <div ng-view class="reveal-animation animate-show"></div>
 </div>

and in your controller you can write function like this

$scope.changeTabs= function (color){
   console.log(color);
   //your logic here
};

(It will be easy you made a fiddle.)

Collectives™ on Stack Overflow

How to change the class using Angular js?

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related