AngularJs toggle ng-class ng-click

Question

Can anyone offer the correct approach to this JSFiddle:

<style>
 .red #btn{
     background-color:red;
  }

 .blue #btn{
    background-color:blue;
  }
 </style>

 <body ng-app="ap" ng-controller="con">
    <button id="btn" ng-click="changeClass()">Change Class</button>    
 </body>

 <script>
  var app = angular.module("ap",[]);

  app.controller("con",function($scope){

  $scope.class = "red";

  $scope.changeClass = function(){
     if ($scope.class === "red #btn")
         $scope.class = "blue #btn";
      else
         $scope.class = "red #btn";
   };
 });

 </script>

JsFiddle Link

I am trying to change the class of an element via .class & #ID.

Thanks in advance

Thanks tymeJV, new JSFiddle:

Solution

tymeJV · Accepted Answer · 2014-02-27 14:54:39Z

28

The correct approach would be using ng-class based on a toggle variable, consider:

CSS:

.red {
    color: red;
}

JS:

$scope.toggle = false;

HTML:

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

ng-class works by assigning the referenced class (in the above, "red") based on if the variable ("toggle") is true or false.

answered Feb 27, 2014 at 14:54

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

9 Comments

Mike Jones Over a year ago

tymeJV: Question. What if I have a <div id="SomeDiv"></div> and I want to change it's color with the button click?

tymeJV Over a year ago

Put the ng-class on that element

Mike Jones Over a year ago

tymeJV: I know I am pushing my luck here, hehe, but how to toggle between red and blue?

tymeJV Over a year ago

Ahh not sure of the syntax off the top of my head, but you can do it with ng-cass - try searching for ng-class if else

MaNn Over a year ago

@tymeJV Have someone told you before ? You're genius :) Worked like a charm !!

|

Collectives™ on Stack Overflow

AngularJs toggle ng-class ng-click

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related