В чем разница между ng-class и ng-style?

ng-class и ng-style оба кажутся методами динамического задания классов CSS. В чем разница между ними?

Ответ 1

ng-style используется для интерполяции javascript-объекта в атрибут style, а не css-класс.

Следующая директива будет переведена в стиль = "color: red"

ng-style="{color: 'red'}"

И директива ng-class переводит ваш объект в атрибут class.

Ниже будет переведено на class= "deleted", если переменная isDeleted верна.

ng-class="{'deleted': isDeleted}"

Примечание:

Существует еще один пример использования для ng-стиля. Если вы хотите интерполировать что-то в атрибуте стиля, вам следует использовать ng-стиль. В противном случае это не сработает до того, как Internet Explorer 11 предложит документацию.

Итак, вместо использования стиля:

style="width: {{progress}}"

Используйте стиль ng:

ng-style="{'width':progress}"

Ответ 2

В ng-class вы загружаете класс CSS, определенный в определенном месте, например Bootstrap. В ng-style вы устанавливаете стиль CSS, который хотите, чтобы этот элемент имел, например:

ng-style="{ 'background-color': person.email == selectedPerson.email ? 'lightgray' : ' '}" //background-color is a style

has-error - это класс, определенный в месте, который состоит из стиля (ов):

ng-class="{ 'has-error’: !theForm.email.$valid, 'has-success':theForm.email.$valid}

Ответ 3

Из официальных документов: https://angular.io/api/common/NgClass

Это разные способы использования ngClass...

...

...

...

...
Аналогично с ngStyle вы можете сделать следующее:

...
- Ваш styleExp может быть любым, что оценивает допустимое значение для атрибута, который вы устанавливаете, например, font-size в приведенном выше примере
- С другой стороны,
...
- Где objExp - это объект, содержащий пары ключ-значение ваших атрибутов стиля, например, {width: 40, margin: '2em'} и т.д.