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

Вот фрагмент из моего HTML-кода.Генерация переменной для ng-класса динамически с использованием выражения в AngularJs

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

То, что я пытаюсь сделать: Я создал 3 Дивых элементы, которые будут в верхней части экрана, используя указанный выше фрагмент кода. Каждому элементу 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.Box1myBoxes.Box2 и myBoxes.Box3, тогда он отлично работает.

<div ng-class="myBoxes.Box1">Box1</div> 
<div ng-class="myBoxes.Box2">Box2</div> 
<div ng-class="myBoxes.Box3">Box3</div>

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

источник

2013-02-22 Durin

Вы почти там, это 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>

источник

2013-02-22 09:05:44

Awesome! работает как шарм. Но я все еще удивляюсь, почему это работает, обратившись к значениям объекта Json, используя нотацию массива вместо обычного способа доступа к объектам Json с использованием точечной нотации. Я новичок в javscript, прошу прощения, если я задаю очень фундаментальный вопрос. – Durin

Во-первых, 'myBoxes. {{BoxName}}' не является допустимым выражением в Angular, но 'myBoxes.boxName' и' myBoxes [boxName] 'есть. В Javascript эти выражения одинаковы: 'myBoxes.boxName',' myBoxes ['boxName'] 'и' var name = 'boxName'; myBoxes [name]; ', что означает, что если вы хотите получить свойство на объекте, но не знаете, что такое имя свойства, вы можете вместо этого использовать нотацию массива с переменной. –

Редактировать: oh! то в этом случае '{{'myBoxes.' + name}} 'также должен работать для меня, поскольку это действительное угловое выражение js. Но это не работает для меня. Спасибо за объяснение. – Durin

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

ответ

Смежные вопросы