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

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

ng-class ensembles de classes. ng-style jeux de styles. Cette réponse pourrait être instructif.

OriginalL'auteur David Grinberg | 2014-11-13

  1. 18

    ng-style est utilisée pour interpoler objet javascript en style attribut, pas de classe css.

    Directive suivante sera traduit en style="color:red"

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

    Et ng-classe directive traduit votre objet dans classe attribut.

    La suite seront convertis en class="supprimé" quand isDeleted variable est vrai.

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

    Remarque:

    Il y a encore un cas d'utilisation pour le gn de style. Si vous voulez interpoler quelque chose dans l'attribut style, vous devriez envisager d'utiliser ng-style. Sinon, ce ne serait pas le travail avant qu'Internet Explorer 11 la documentation suggère.

    Donc, au lieu d'utiliser le style:

    style="width: {{progress}}"

    Utilisation ng-style:

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

    OriginalL'auteur

  2. 1

    Dans ng-class vous êtes le chargement d'une classe CSS définies dans un certain lieu, comme Bootstrap. Dans ng-style vous définissez le style CSS que vous souhaitez que l'élément a, 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 qui est composé par le style(s):

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

    OriginalL'auteur