Comment garder les classes CSS non affectées par les contrôleurs angulaires

Dans Angular (et en général), je suis un grand fan du maintien de la logique de vue en dehors de mes contrôleurs, et là où je pense que cela n'arrive pas, c'est avec l'utilisation des classes CSS et de la classe ng.

Vous n'êtes peut-être pas familier avec ng-class, c'est une directive spéciale qui permet de lier des expressions et de les placer en tant que classes d'éléments. Une utilisation très courante de ng-class ressemble à ceci :

<p ng-class="{{active}}">Class applied!</p><script>
    function MySimpleCtrl() {
        $scope.active = &#39;active&#39;;
        ...

Donc, dans le contrôleur, nous définissons la classe spécifique qui doit être affichée ; Donc, en supposant que nous avons une classe "inactive", nous définissons simplement la classe. Variable $ scope.active sur "inactive", nous définissons finalement la classe dans la vue.

Mais ng-class est encore mieux que ça :

ng-class accepte trois types de valeurs différents :

1. Valeur de chaîne (nom de la classe)

2. Tableau de chaînes (classe à appliquer)

3. Objet + expression à évaluer

La syntaxe de l'option 3 ressemble à ceci

ng-class="{object of key/value pairs}[expression to evaluate]"

Fondamentalement, ng-class évalue l'expression (entre crochets) puis l'utilise comme clé pour l'objet, la valeur associée à la clé est la classe appliquée ;

Cela nous permet de convertir la valeur $scope.active en un vrai booléen (c'est exactement ainsi que nous l'utilisons) - sans logique d'affichage dans le contrôleur, le contrôleur est plus facile à tester et peut être réutilisé.

Voici un exemple simple :

<p ng-class="{true: &#39;active&#39;, false: &#39;inactive&#39;}[isActive]">
    Class applied
!</p><script>
    function MySimpleCtrl() {
        $scope.isActive = true;

Si vous utilisez une sorte d'expression conditionnelle (c'est-à-dire bascule), vous pouvez utiliser une autre syntaxe très similaire :

ng-class="{'selected': isSelected, 'blue': isBlue}"

Ici, si selected est vrai, la classe sélectionnée sera appliquée, tout comme la classe bleue. Angular appliquera autant de réalisme que possible, vous pourrez donc définir les classes sur sélectionnées et bleues.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!