Вот фрагмент из моего HTML-кода.

    {{boxName}}

Что я пытаюсь сделать: Я создал 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-класса, тогда он работает нормально. Например, для фрагмента, приведенного ниже, когда я динамически изменяю значение переменныхmyBoxes.Box1 myBoxes.Box2 а такжеmyBoxes.Box3 тогда это работает отлично.

Box1
Box2
Box3

Однако если я сгенерирую переменную класса ng динамически"myBoxes.{{boxName}}" тогда это невести себя как переменная. Я уверен, что был бы лучший способ достичь того, что я пытаюсь сделать, однако я не смог найти это после нескольких часов поисков и проб и ошибок. Буду рад, если кто-нибудь сможет мне помочь.