Generating variable for ng-class dynamically using Expression in AngularJs

javascript angularjs html angularjs-directive

29,330

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>

29,330

Author by

Durin

Updated on July 09, 2022

Comments

Durin almost 2 years
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.
Durin over 11 years

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 11 years

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 11 years

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 11 years

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 about 9 years

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.