web-dev-qa-db-fra.com

Quelle est la différence entre ng-class et ng-style?

ng-class et ng-style semblent être des méthodes de définition dynamique de classes CSS. Quelle est la différence entre eux?

cssangularjsangularjs-directive
14
David Grinberg

ng-style est utilisé pour interpoler un objet javascript dans style attribut, pas dans la classe css.

La directive suivante sera traduite en style = "color: red"

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

Et la directive ng-class traduit votre objet en class attribut.

Les éléments suivants seront traduits en class = "supprimé" lorsque isDeleted variable est vrai.

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

Remarque:

Il y a encore un cas d'utilisation pour ng-style. Si vous souhaitez interpoler quelque chose dans l'attribut style, vous devriez envisager d'utiliser le style ng. Sinon, cela ne fonctionnerait pas avant Internet Explorer 11, comme le suggère documentation .

Donc, au lieu d'utiliser le style:

style="width: {{progress}}"

Utilisez le style ng:

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

Dans ng-class, vous chargez une classe CSS définie à un endroit donné, comme Bootstrap. Dans ng-style, vous définissez le style CSS que vous souhaitez attribuer à cet élément, par exemple:

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

has-error est une classe définie dans un endroit composé par style (s):

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

D'après les documents officiels: https://angular.io/api/common/NgClass

  1. Ce sont différentes façons d'utiliser ngClass

    ...

    <some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-

    élément>

    <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

2. De même avec ngStyle, vous pouvez effectuer les opérations suivantes: 

**< some-element [ngStyle]="{'font-style': styleExp}">...</some-element>**

  • Votre styleExp peut être tout ce qui correspond à une valeur légale pour l'attribut que vous définissez, par exemple. taille de police dans l'exemple ci-dessus

  • Alternativement

    **** <some-element [ngStyle] = "objExp"> ... ****

  • Où objExp est un objet contenant des paires clé-valeur de vos attributs de style, par exemple. {largeur: 40, marge: '2em'} etc.

0
Ndamulelo Nemakhavhani