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

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

Обзор

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

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

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

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

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

Известные проблемы

Не следует использовать интерполяцию в значении атрибута class, когда используется директива ngClass на том же элементе. Подробнее см. здесь.

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

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

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

в качестве атрибута:

<ANY
  ng-class="expression">
...
</ANY>

в качестве CSS класса:

<ANY class="ng-class: expression;"> ... </ANY>

Аргументы

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

Анимации

Анимация	Происходит
addClass	непосредственно перед применением класса к элементу
removeClass	непосредственно перед удалением класса из элемента
setClass	непосредственно перед добавлением и удалением классов из элемента одновременно

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

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

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

Примеры

Базовый

Анимации

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

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