Setting class to a variable in AngularJS

Question

Sorry if this is very simply, i just started using angular yesterday. I want to set a class of something to a variable, yet it isnt working. This is what i've done:

<body ng-app="Witzle" ng-controller="BGController" class="{{bg.type}}">

and

app.controller('BGController',function($scope){
$scope.bg = {type:'witzle-bg-image'};
$scope.gah = function(name){
      alert(name)
      $scope.bg = {type:name};
 }
})

Ive run the code, and i know that $scope.gah() is being called because of the alert, but the class isnt being updated.

UPDATE: gah is already being called from somewhere else, my problem is that when it is called the class doesnt change

possible duplicate of What is the best way to conditionally apply a class with angularjs? — drew_w
– drew_w, Commented Jul 13, 2014 at 19:39

sylwester · Accepted Answer · 2014-07-13 22:03:58Z

2

All you need is use ng-class directive without curly braces.

<body ng-app="Witzle" ng-controller="BGController" ng-class="bg.type">

please see demo:

http://jsbin.com/mesere/1/edit?html,css,js,output

answered Jul 13, 2014 at 22:03

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

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

Comments

V31 · Accepted Answer · 2014-07-13 20:37:18Z

0

You need to apply ng-class. Created a fiddle to help you to start with coding

Code snippet:

<div ng-class="{abc: setThisClass}">
     TEST
</div>

UPDATED FIDDLE To have the class set according to a variable string

edited Jul 13, 2014 at 20:37

answered Jul 13, 2014 at 20:13

V31

7,6643 gold badges28 silver badges44 bronze badges

1 Comment

user3293629 Over a year ago

I could do that, but there are a number of classes i want to switch between and that seems very inefficient, i would need a bool for each and an ng-class attribute for each, is there no way to do it with a variable string?

Collectives™ on Stack Overflow

Setting class to a variable in AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related