CODEWITHSUNDEEP
angularjs
manoji stack
manoji stack

Reputation: 739

How to change the class using Angular js?

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

Upvotes: 1

Views: 107

Answers (2)

New Dev
New Dev

Reputation: 49610

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>

Upvotes: 1

Hareesh
Hareesh

Reputation: 6900

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.)

Upvotes: 0

Related Questions