AngularJS
directive classe ng

Trois types d'expressions de classe ng

Angular prend en charge trois types d'expressions dans la directive ng-class .

1. ficelle

<span ng-class="MyClass">Sample Text</span>

Spécifier une expression qui évalue une chaîne demande à Angular de la traiter comme une variable $ scope. Angular vérifie la portée de $ et recherche une variable appelée "MyClass". Quel que soit le texte contenu dans "MyClass", il deviendra le nom de classe réel appliqué à ce <span> . Vous pouvez spécifier plusieurs classes en séparant chaque classe d'un espace.

Dans votre contrôleur, vous pouvez avoir une définition qui ressemble à ceci:

$scope.MyClass = "bold-red deleted error";

Angular évaluera l'expression MyClass et trouvera la définition de $ scope. Il appliquera les trois classes "bold-red", "deleted" et "error" à l'élément <span> .

La spécification des classes de cette manière vous permet de modifier facilement les définitions de classe dans votre contrôleur. Par exemple, vous devrez peut-être modifier la classe en fonction d'autres interactions utilisateur ou de nouvelles données chargées à partir du serveur. De plus, si vous avez beaucoup d'expressions à évaluer, vous pouvez le faire dans une fonction qui définit la liste finale des classes dans une variable $scope . Cela peut être plus facile que d'essayer de placer de nombreuses évaluations dans l'attribut ng-class de votre modèle HTML.

2. objet

C'est le moyen le plus couramment utilisé pour définir des classes à l'aide de ng-class car il vous permet de spécifier facilement les évaluations qui déterminent la classe à utiliser.

Spécifiez un objet contenant des paires clé-valeur. La clé est le nom de classe qui sera appliqué si la valeur (un conditionnel) est évaluée comme vraie.

<style>
    .red { color: red; font-weight: bold; }
    .blue { color: blue; }
    .green { color: green; }
    .highlighted { background-color: yellow; color: black; }
</style>

<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted }">Sample Text</span>

<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>

3. tableau

Une expression qui évalue un tableau vous permet d'utiliser une combinaison de chaînes (voir n ° 1 ci-dessus) et d' objets conditionnels (n ° 2 ci-dessus).

<style>
    .bold { font-weight: bold; }
    .strike { text-decoration: line-through; }
    .orange { color: orange; }
</style>

<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

Cela crée un champ de saisie de texte lié à la variable d'étendue UserStyle qui permet à l'utilisateur de saisir n'importe quel nom de classe. Ceux-ci seront appliqués dynamiquement à l'élément <p> tant que type d'utilisateur. En outre, l'utilisateur peut cliquer sur la case à cocher liée aux données de la variable d'étendue d' warning . Cela sera également appliqué dynamiquement à l'élément <p> .