Улучшить эту документацию Просмотреть исходный код 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.3.20/docs/api/ng/directive/ngClass