Generating variable for ng-class dynamically using Expression in AngularJs

Question

Here is snippet from my HTML code.

<div ng-repeat="boxName in boxNameList">
    <div ng-class="myBoxes.{{boxName}}">{{boxName}}</div>
</div>

What I am trying to do: I have created 3 div elements which will be at the top of a screen using the above written snippet. Each div element will be given a shape of a box using css. A box(div) can have either red color as its background or black color as its background.

CSS for the two colors is:

.redBackground{
   background-color: red;
}

.blackBackground{
  background-color: black;
}

Here is a snippet from my controller:

$scope.boxNameList=['Box1','Box2','Box3'];
$scope.myBoxes={
      Box1: "redBackground",
      Box2: "blackBackground",
      Box3: "blackBackground"
}

In this example I have made $scope.myBoxes as a static Json but at runtime I plan to generate Json code so that I can dynamically assign background colors to my boxes.

Problem that I am facing: Well the problem is that I am not able to see the boxes with colors at all. The ng-class variable name in this case as you can see is also generated dynamically. If I do not use ng-repeat and do not dynamically generate ng-class variable name then it works fine. For e.g for the snippet given below when I dynamically change the value of the varibales myBoxes.Box1 myBoxes.Box2 and myBoxes.Box3 then it works perfectly.

<div ng-class="myBoxes.Box1">Box1</div>
<div ng-class="myBoxes.Box2">Box2</div>
<div ng-class="myBoxes.Box3">Box3</div>

However if I generate the ng-class variable dynamically "myBoxes.{{boxName}}" then it doesn't behave like a variable. I am sure there would be a better way to achieve what I am trying to do however I was not able to find that after hours and hours of googling/trial and error. Would be glad if someone could help me.

Anders Ekdahl · Accepted Answer · 2013-02-22 09:05:44Z

13

You're almost there, it's myBoxes[boxName] and not myBoxes.{{boxName}}.

Something like this:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.controller('MainCtrl', ['$scope', function($scope){
        $scope.boxNameList=['Box1','Box2','Box3'];
        $scope.myBoxes={
              Box1: "redBackground",
              Box2: "blackBackground",
              Box3: "blackBackground"
        }
    }]);
    </script>
    <style type="text/css">
    .redBackground{
       background-color: red;
    }

    .blackBackground{
      background-color: black;
    }
    </style>
</head>
<body ng-controller="MainCtrl">
    <div ng-repeat="name in boxNameList">
        <div ng-class="myBoxes[name]">Box1</div>
    </div>
</body>
</html>

answered Feb 22, 2013 at 9:05

Anders Ekdahl

23k4 gold badges73 silver badges61 bronze badges

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

5 Comments

Durin Over a year ago

Awesome! works like a charm. But I still wonder why it worked by accessing the Json object values using array notation instead of the normal way of accessing Json objects using dot notation. I am a javscript newbie, I apologize if I am asking a very fundamental question.

Anders Ekdahl Over a year ago

First off, myBoxes.{{boxName}} isn't a valid expression in Angular, but myBoxes.boxName and myBoxes[boxName] are. In Javascript, these expressions are the same: myBoxes.boxName, myBoxes['boxName'] and var name = 'boxName'; myBoxes[name]; which means that when you want a property on an object but you don't know what the property name is, you can use array notation with a variable instead.

Durin Over a year ago

Edit: oh! then in that case {{'myBoxes.' + name}} should also work for me since it is a valid angular js expression. But it doesn't work for me. Thanks for the explanation.

Anders Ekdahl Over a year ago

Yes, you could, but if you use {{expr}} in ng-class, the expression won't be re-evaluated later. See the difference here: jsfiddle.net/DwpXs

Karma Over a year ago

Can't seem to get it working. I have an array of objects, like: {name: 'christina', gender: 'female'}. I tried doing ng-repeat="person in people" and inside ng-class="person['gender']" but can't get the .female class attached.

Collectives™ on Stack Overflow

Generating variable for ng-class dynamically using Expression in AngularJs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related