10

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.

domino_katrino
  • 356
  • 3
  • 19
Durin
  • 2,070
  • 5
  • 23
  • 37

1 Answers1

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>
Anders Ekdahl
  • 22,685
  • 4
  • 70
  • 59
  • 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. – Durin Feb 22 '13 at 09:17
  • 4
    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. – Anders Ekdahl Feb 22 '13 at 09:27
  • 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. – Durin Feb 22 '13 at 09:46
  • 1
    Yes, you could, but if you use {{expr}} in ng-class, the expression won't be re-evaluated later. See the difference here: http://jsfiddle.net/DwpXs/ – Anders Ekdahl Feb 22 '13 at 09:47
  • 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. – Karma Apr 04 '15 at 10:55