Html 使用 AngularJs 中的表达式为 ng-class 动态生成变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15020189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Generating variable for ng-class dynamically using Expression in AngularJs
提问by Durin
Here is snippet from my HTML code.
这是我的 HTML 代码片段。
<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.
我想要做什么：我使用上面编写的代码片段创建了 3 个 div 元素，它们将位于屏幕顶部。每个 div 元素将被赋予一个使用 css 的盒子形状。一个框（div）可以有红色作为其背景或黑色作为其背景。
CSS for the two colors is:
两种颜色的 CSS 是：
.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.myBoxesas a static Json but at runtime I plan to generate Json code so that I can dynamically assign background colors to my boxes.
在这个例子中，我制作$scope.myBoxes了一个静态 Json，但在运行时我计划生成 Json 代码，以便我可以动态地为我的框分配背景颜色。
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.Box1myBoxes.Box2and myBoxes.Box3then it works perfectly.
我面临的问题：问题是我根本看不到带有颜色的框。如您所见，本例中的 ng-class 变量名称也是动态生成的。如果我不使用 ng-repeat 并且不动态生成 ng-class 变量名，那么它工作正常。对于例如用于下面的代码片段时，我动态改变值的varibales给予myBoxes.Box1myBoxes.Box2和myBoxes.Box3然后它完美的作品。
<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.
但是，如果我动态生成 ng-class 变量，"myBoxes.{{boxName}}"则它的行为不像变量。我相信会有更好的方法来实现我想要做的事情，但是经过数小时的谷歌搜索/反复试验后，我无法找到它。如果有人可以帮助我，我会很高兴。
回答by Anders Ekdahl
You're almost there, it's myBoxes[boxName]and not myBoxes.{{boxName}}.
你快到了，它是myBoxes[boxName]，不是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>
