Angular ng-class: объединить перечисляемые (массивные) классы и классы на основе условий?

У меня есть массив с классами, установленными в контроллере (должен быть таким, он читается из меташаблона страницы). Я также хотел бы, чтобы условные классы применялись к одному и тому же элементу. Является ли это возможным?

Изменить, больше информации: мой html-элемент имеет классы, происходящие из двух источников: один представляет собой набор классов, созданных контроллером (они предоставляются службой вне моего кода, я не могу жестко закодировать их в представлении). Другой источник — это вывод условия (например: если «$scope.activeElement === name_of_this_element, добавьте «активный» класс).
В директиве ng-class я не могу использовать обозначение объекта для неуказанного список классов (первый источник), и я должен использовать объектную нотацию для условных классов.

Изменить: найдено решение (см. Ниже).


angularjs ng-class
person muszek    schedule 09.12.2013    source источник
comment
вам действительно следует предоставить гораздо больше деталей, если вы хотите разумных ответов   -  person charlietfl    schedule 10.12.2013
comment
@charlietfl: да, я знаю. Ребёнок заплакал, и я знала, что не смогу сидеть до конца вечера, я могла либо не задать вопрос, либо сделать это сразу :-). В любом случае, я добавил еще некоторые детали и возможное решение. Пожалуйста, не стесняйтесь поделиться своим мнением.   -  person muszek    schedule 10.12.2013

Ответы (4)


arrow_upward
7
arrow_downward

Другой вариант — написать ng-класс таким образом

<div ng-class="[item.class, item.errorClass, item.locked ? 'locked-item' : '']"></div>
person winston.wolfe    schedule 31.07.2015
comment
При необходимости динамического добавления нескольких классов с использованием условий и желании, чтобы хотя бы один из классов был установлен функцией, это единственный вариант, который я мог найти, который будет работать. - person CGutz; 14.10.2015
comment
Это также был единственный вариант, который работал для меня. Мне нужно было смешать фиксированный класс и класс, исходящий от функции: ng-class=['fixedClass', styleManager.getItemClass($index)] - person Mario M.; 21.01.2016

arrow_upward
4
arrow_downward

Я нашел решение - я поместил «фиксированные» классы в обычный атрибут класса (сначала преобразовав эту строку в массив) и условные в объекте ng-класса, например:

<td ng-repeat="cell in row.cells" class="{{cell.cssClass}}" ng-class="{active: condition}">
person muszek    schedule 10.12.2013

arrow_upward
0
arrow_downward

Тот факт, что вы сохранили массив имен классов, здесь не имеет значения.

HTML

<div ng-class="arrOfClasses[condition]"></div>

Угловой

app.controller('myCtrl', function($scope) {
    $scope.arrOfClasses = ['class1', 'class2', 'class3'];

    $scope.condition = 1; // what ever number here
});
person Daiwei    schedule 09.12.2013

arrow_upward
0
arrow_downward

Хороший способ, а также избежать использования {{}} внутри класса - это просто выражение:

<td ng-repeat="cell in row.cells" ng-class="(condition ? 'active ' : '') + cell.cssClass">
person fernandopasik    schedule 08.08.2014