这是我的 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 类变量名称也是动态生成的。如果我不使用 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>
但是，如果我动态生成 ng 类变量 "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>
关于javascript - 使用 AngularJs 中的表达式动态生成 ng 类变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15020189/