这是我的HTML代码的摘录。
<div ng-repeat="boxName in boxNameList">
<div ng-class="myBoxes.{{boxName}}">{{boxName}}</div>
</div>
我正在尝试做的事情:
我使用上面编写的代码段创建了3个div元素，它们将位于屏幕顶部。每个div元素都将使用css赋予框的形状。一个box(div)可以具有红色作为背景，也可以具有黑色作为背景。
这两种颜色的CSS是:
.redBackground{
background-color: red;
}
.blackBackground{
background-color: black;
}
这是我的 Controller 的片段:
$scope.boxNameList=['Box1','Box2','Box3'];
$scope.myBoxes={
Box1: "redBackground",
Box2: "blackBackground",
Box3: "blackBackground"
}
在此示例中，我将
$scope.myBoxes设置为静态Json，但是在运行时，我计划生成Json代码，以便可以为框动态分配背景颜色。我面临的问题:问题是我根本看不到带有颜色的框。如您所见，这种情况下的ng-class变量名也是动态生成的。如果我不使用ng-repeat并且不动态生成ng-class变量名，那么它可以正常工作。例如，对于下面给出的代码段，当我动态更改varibales
myBoxes.Box1 myBoxes.Box2和myBoxes.Box3的值时，它可以完美地工作。<div ng-class="myBoxes.Box1">Box1</div>
<div ng-class="myBoxes.Box2">Box2</div>
<div ng-class="myBoxes.Box3">Box3</div>
但是，如果我动态生成ng-class变量
"myBoxes.{{boxName}}"，那么它的行为就不像变量。我确信会有更好的方法来实现我要完成的任务，但是经过数小时的谷歌搜索/尝试和错误后，我却找不到。如果有人能帮助我会很高兴。 最佳答案
您快到了，它是myBoxes[boxName]而不是myBoxes.{{boxName}}。
像这样的东西:
<!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>