这里是我的HTML代码片段。在AngularJs中使用Expression动态生成ng类的变量
<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
和myBoxes.Box3
的值时,下面给出的代码片段完好。
<div ng-class="myBoxes.Box1">Box1</div>
<div ng-class="myBoxes.Box2">Box2</div>
<div ng-class="myBoxes.Box3">Box3</div>
但是如果我生成纳克级可变动态"myBoxes.{{boxName}}"
那么它不会表现得像一个变量。我确信有一个更好的方法来实现我正在尝试做的事情,但是我没有发现经过数小时和数小时的谷歌搜索/试验和错误。如果有人能帮助我会很高兴。
真棒!奇迹般有效。但我仍然想知道为什么它通过使用数组表示法访问Json对象值而不是使用点表示法访问Json对象的常规方式。 我是一个javscript新手,我很抱歉如果我提出一个非常基本的问题。 – Durin 2013-02-22 09:17:05
首先,'myBoxes。{{boxName}}'在Angular中不是有效的表达式,但是'myBoxes.boxName'和'myBoxes [boxName]'是。在Javascript中,这些表达式是相同的:'myBoxes.boxName','myBoxes ['boxName']'和'var name ='boxName'; myBoxes [name];'这意味着当你想要一个对象的属性,但你不知道属性名是什么时,你可以使用数组表示法来代替变量。 – 2013-02-22 09:27:51
编辑: 哦!那么在这种情况下''{myBoxes'。 + name}}'也应该为我工作,因为它是一个有效的角度js表达式。但它不适合我。 感谢您的解释。 – Durin 2013-02-22 09:46:08