Генерирование переменной для ng-класса динамически с использованием выражения в AngularJs

Вот фрагмент из моего 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 в этом случае, как вы можете видеть, также генерируется динамически. Если я не использую 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}}", то она не ведет себя как переменная. Я уверен, что был бы лучший способ добиться того, что я пытаюсь сделать, однако я не смог найти это после нескольких часов и часов поиска/проб и ошибок. Был бы рад, если бы кто-нибудь мог мне помочь.

Ответы

Ответ 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>