Комплекс angular js ng-class

У меня есть компонент и проблема связана с классом css. Я хочу, чтобы у него всегда был класс "ящик", а затем дополнительные классы, заданные директивой "класс" и один условный класс "мини".

Концептуально, что я хочу достичь, это примерно так:

<div class="box {{class}}" data-ng-class="{mini: !isMaximized}">
...
</div>

Проблема заключается в том, что когда я устанавливаю атрибут класса html, атрибут ng-class опущен. Как заставить мой пример работать без изменения контроллера? Возможно ли это, или я должен установить класс в контроллере вместо этого (чего я хочу избежать)?

Ответ 1

Мне понадобилось несколько классов, где один из них был получен с помощью $scope, а другие были литеральными. Благодаря намеку от Андре, ниже работал у меня.

<h2 class="{{workStream.LatestBuildStatus}}" 
    ng-class="{'expandedIcon':workStream.isVisible,  'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>

Ответ 2

Быстрое решение будет определять класс ящиков внутри атрибута ng-class:

<div data-ng-class="{mini: !isMaximized, box: true}"></div>

Если вы хотите включить переменную scope как класс, вы не можете использовать ng-class:

<div class="{{class}} box {{!isMaximized && 'mini' || ''}}">

Angular выражения не поддерживают тернарный оператор, но его можно эмулировать следующим образом:

условие && & (ответ, если true) || (ответ, если false)

Ответ 3

Изменить: для более новых версий 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.

Ответ 4

Другой способ сделать это без двойных фигурных скобок и включает переменные области видимости, проверенные с помощью angular v1.2 +.

<div ng-class="['box', 
                aClass, 
               {true:'large': false: 'mini'}[isMaximized]]"></div>

Это также довольно приятно, потому что переменная может использовать разные типы в качестве индекса без увеличения сложности с использованием тернар. Он также может удалить любую потребность в отрицаниях;) Вот ссылка на скрипку

Ответ 5

Вы можете использовать простое выражение, приведенное ниже

ng-class="{'active' : itemCount, 'activemenu' : showCart}"