这是我的 HTML 代码的片段。
<div ng-repeat="boxName in boxNameList">
<div ng-class="myBoxes.{{boxName}}">{{boxName}}</div>
</div>
我正在尝试做的事情:我使用上面编写的代码片段创建了 3 个 div 元素,它们将位于屏幕顶部。每个 div 元素将使用 css 赋予一个盒子的形状。框(div)可以使用红色作为背景,也可以使用黑色作为背景。
两种颜色的 CSS 是:
.redBackground{
background-color: red;
}
.blackBackground{
background-color: black;
}
这是我的控制器的片段:
$scope.boxNameList=['Box1','Box2','Box3'];
$scope.myBoxes={
Box1: "redBackground",
Box2: "blackBackground",
Box3: "blackBackground"
}
在这个例子中我做了$scope.myBoxes
作为静态 Json,但在运行时我计划生成 Json 代码,以便我可以动态为我的框分配背景颜色。
我面临的问题:问题是我根本看不到带有颜色的盒子。正如您所看到的,本例中的 ng-class 变量名称也是动态生成的。如果我不使用 ng-repeat 并且不动态生成 ng-class 变量名,那么它可以正常工作。例如,当我动态更改变量的值时,下面给出的代码片段myBoxes.Box1
myBoxes.Box2
and 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}}"
那么它的行为就不像变量了。我确信会有更好的方法来实现我想要做的事情,但是经过数小时的谷歌搜索/反复试验后我无法找到它。如果有人能帮助我,我会很高兴。