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