使用防爆AngularJs pression动态NG类发生变化 [英] Generating variable for ng-class dynamically using Expression in AngularJs
问题描述
下面是从我的HTML code片段。
Here is snippet from my HTML code.
<div ng-repeat="boxName in boxNameList">
<div ng-class="myBoxes.{{boxName}}">{{boxName}}</div>
</div>
我所试图做的事：
我创建了将在使用上面写片断屏幕的顶部3 div元素。每个div元件将给出使用CSS的箱的形状。一箱（格）可以有红色为背景或黑色为背景。
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.
CSS的两种颜色是：
CSS for the two colors is:
.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"
}
在这个例子中我取得了 $ scope.myBoxes 作为一个静态的Json但在运行时我计划生成JSON code，这样我可以动态分配的背景颜色我的箱子。
In this example I have made $scope.myBoxes as a static Json but at runtime I plan to generate Json code so that I can dynamically assign background colors to my boxes.
的问题，我面对的：好了，问题是我不能够看到盒子颜色的。在这种情况下，你可以看到纳克级的变量名也动态生成。如果我不使用NG重复，不动态生成纳克级的变量名，然后它工作正常。对于例如用于下面的代码片段时，我动态改变varibales值 myBoxes.Box1 myBoxes.Box2 并给予 myBoxes.Box3 那么完美。
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.Box1 myBoxes.Box2 and myBoxes.Box3 then it works perfectly.
<div ng-class="myBoxes.Box1">Box1</div>
<div ng-class="myBoxes.Box2">Box2</div>
<div ng-class="myBoxes.Box3">Box3</div>
但是，如果我生成动态的NG-类变量myBoxes。{{boxName}}那么它并不像一个变量。我相信会有一个更好的方法实现我所试图做的，但是我没能找到时间和谷歌搜索/试验和错误小时后。会很高兴，如果有人可以帮助我。
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.
推荐答案
您是几乎没有，这是 myBoxes [boxName] ，而不是 myBoxes {{} boxName} 。
You're almost there, it's myBoxes[boxName] and not 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>
这篇关于使用防爆AngularJs pression动态NG类发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
