动态使用表达AngularJs生成变量纳克级(Generating variable for ng-

下面是从我的HTML代码段。

<div ng-repeat="boxName in boxNameList">
    <div ng-class="myBoxes.{{boxName}}">{{boxName}}</div>
</div>

我所试图做的事情：我创建了将在使用上面写片断屏幕的顶部3个div元素。每个div元素将给出使用CSS的箱的形状。一个框（格）可以有红色为背景或黑色为背景。

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-类变量名称也动态生成。如果我不使用NG重复，并不动态生成纳克级的变量名称，然后它工作正常。对于如下面的时候我动态改变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-类变量"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>