У меня есть компонент и проблема связана с классом css. Я хочу, чтобы у него всегда был класс "ящик", а затем дополнительные классы, заданные директивой "класс" и один условный класс "мини".
Концептуально, что я хочу достичь, это примерно так:
<div class="box {{class}}" data-ng-class="{mini: !isMaximized}">
...
</div>
Проблема заключается в том, что когда я устанавливаю атрибут класса html, атрибут ng-class опущен. Как заставить мой пример работать без изменения контроллера? Возможно ли это, или я должен установить класс в контроллере вместо этого (чего я хочу избежать)?
Мне понадобилось несколько классов, где один из них был получен с помощью $scope, а другие были литеральными. Благодаря намеку от Андре, ниже работал у меня.
<h2 class="{{workStream.LatestBuildStatus}}"
ng-class="{'expandedIcon':workStream.isVisible, 'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>
Быстрое решение будет определять класс ящиков внутри атрибута ng-class:
<div data-ng-class="{mini: !isMaximized, box: true}"></div>
Если вы хотите включить переменную scope как класс, вы не можете использовать ng-class:
<div class="{{class}} box {{!isMaximized && 'mini' || ''}}">
Angular выражения не поддерживают тернарный оператор, но его можно эмулировать следующим образом:
условие && & (ответ, если true) || (ответ, если false)
Изменить: для более новых версий Angular см. ответ Nitins, так как это лучший atm
Для меня это сработало (я работаю над AngularJS v1.2.14 на данный момент, поэтому я думаю, что 1.2.X + должен поддерживать это, не уверен в более ранних версиях):
<div class="box" data-ng-class="{ {{myScopedObj.classesToAdd}}: true, mini: !isMaximized }"></div>
Я заменил {{class}} на {{class}} на {{myScopedObj.classesToAdd}}, чтобы показать, что можно использовать эту переменную или даже более сложный объект.
Таким образом, каждый элемент DIV, разбитый таким образом, будет иметь класс "box" и любой класс, содержащийся в myScopedObj.classesToAdd (полезно при использовании ng-repeat, и каждый элемент в массиве должен иметь другой класс), и он будет имеют класс "mini", если !isMaximized.
Другой способ сделать это без двойных фигурных скобок и включает переменные области видимости, проверенные с помощью angular v1.2 +.
<div ng-class="['box',
aClass,
{true:'large': false: 'mini'}[isMaximized]]"></div>
Это также довольно приятно, потому что переменная может использовать разные типы в качестве индекса без увеличения сложности с использованием тернар. Он также может удалить любую потребность в отрицаниях;) Вот ссылка на скрипку
Вы можете использовать простое выражение, приведенное ниже
ng-class="{'active' : itemCount, 'activemenu' : showCart}"