Улучшить эту документацию Просмотреть исходный код ngClass

директива в модуле ng

Директива ngClass позволяет динамически задавать CSS-классы HTML-элементу, привязывая выражение, представляющее все добавляемые классы.

Директива работает тремя различными способами, в зависимости от типа результата вычисления выражения:

Если выражение вычисляется в строку, строка должна содержать одно или несколько имён классов, разделённых пробелами.
Если выражение вычисляется в массив, каждый элемент массива должен быть строкой, содержащей одно или несколько имён классов, разделённых пробелами.
Если выражение вычисляется в объект, то для каждой пары ключ-значение в объекте с истинным значением используется соответствующий ключ в качестве имени класса.

Директива не добавит дублирующиеся классы, если определённый класс уже был задан.

При изменении выражения предварительно добавленные классы удаляются, а затем добавляются новые.

Информация о директиве

Эта директива выполняется на уровне приоритета 0.

Использование

в качестве атрибута:
```
<ANY
  ng-class="">
...
</ANY>
```
в качестве CSS-класса:
```
<ANY class="ng-class: ;"> ... </ANY>
```

Анимации

add — происходит непосредственно перед применением класса к элементу. remove — происходит непосредственно перед удалением класса из элемента.

Нажмите здесь, чтобы узнать больше о шагах, участвующих в анимации.

Аргументы

Параметр	Тип	Описание
ngClass	`expression`	Выражение для вычисления. Результатом вычисления может быть строка, представляющая имена классов, разделённые пробелами, массив или карта имён классов и логических значений. В случае карты имена свойств, значения которых истинны, будут добавлены в качестве CSS-классов элементу.

Пример, демонстрирующий базовые привязки с помощью директивы ngClass.

Анимации

Пример ниже демонстрирует, как выполнять анимации с помощью ngClass.

ngClass и существующие CSS3 переходы/анимации

Директива ngClass по-прежнему поддерживает CSS3 переходы/анимации, даже если они не следуют структуре именования ngAnimate. При анимации ngAnimate добавит дополнительные CSS-классы для отслеживания начала и окончания анимации, но это не помешает уже существующим CSS-переходам на элементе. Чтобы получить представление о том, что происходит во время анимации на основе классов, обязательно ознакомьтесь с пошаговыми инструкциями $animate.addClass и $animate.removeClass.

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.2.32/docs/api/ng/directive/ngClass