Menu
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.
706
The NgClass and NgStyle directives are used to apply style to the HTML element conditionally. The NgClass allows you to apply whole class based on condition whereas NgStyle gives you more flexibility to set individual properties.
The ng-class Directive in AngularJS is used to specify the CSS classes on HTML elements. It is used to dynamically bind classes on an HTML element. The value for the ng-class has either string, an object, or an array. It must contain more than one class name, which is separated by space, in the case of a string.
AngularJS ng-class DirectiveIf it is a string, it should contain one or more, space-separated class names. As an object, it should contain key-value pairs, where the key is the class name of the class you want to add, and the value is a boolean value. The class will only be added if the value is set to true.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
