使用AngularJs中的Expression动态生成ng-class的变量

Question

这是我的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变量名,那么它可以正常工作.对于如下面的时候我动态改变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}}"那么它的行为就不像变量.我相信会有更好的方法来实现我想要做的事情但是我无法在谷歌搜索/反复试验之后找到它.如果有人能帮助我,我会很高兴的.

Answer 1

你几乎就在那里,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>