Comment appliquer de manière conditionnelle les styles CSS dans AngularJS?

Q1. Supposons que je veuille modifier l’apparence de chaque “élément” qu’un utilisateur marque pour suppression avant d’appuyer sur le bouton principal “supprimer”. (Ce retour visuel immédiat devrait éliminer la nécessité de la boîte de dialog “Êtes-vous sûr?”). L’utilisateur vérifiera les cases à cocher pour indiquer quels éléments doivent être supprimés. Si une case n’est pas cochée, cet élément devrait retrouver son aspect normal.

Quelle est la meilleure façon d’appliquer ou de supprimer le style CSS?

Q2. Supposons que je souhaite autoriser chaque utilisateur à personnaliser la présentation de mon site. Par exemple, sélectionnez un ensemble de tailles de police, autorisez les couleurs de premier plan et d’arrière-plan définissables par l’utilisateur, etc.

Quelle est la meilleure façon d’appliquer le style CSS que l’utilisateur sélectionne / saisit?

Angular fournit un certain nombre de directives intégrées pour manipuler le style CSS de manière conditionnelle / dynamic:

  • ng-class – à utiliser lorsque l’ensemble des styles CSS est statique / connu à l’avance
  • ng-style – à utiliser lorsque vous ne pouvez pas définir une classe CSS car les valeurs de style peuvent changer dynamicment. Pensez au contrôle programmable des valeurs de style.
  • ng-show et ng-hide – utilisez si vous avez seulement besoin d’afficher ou de cacher quelque chose (modifie le CSS)
  • ng-if – new dans la version 1.1.5, utilisez à la place du ng-switch plus prolixe si vous avez seulement besoin de vérifier une seule condition (modifie le DOM)
  • ng-switch – utilise au lieu d’utiliser plusieurs ng-shows mutuellement exclusifs (modifie le DOM)
  • ng-disabled et ng-readonlypermettent de restreindre le comportement des éléments de formulaire
  • ng-animate – nouveau dans la version 1.1.4, permet d’append des transitions / animations CSS3

La “méthode angular” normale consiste à lier une propriété de modèle / scope à un élément d’interface utilisateur qui acceptera la saisie / manipulation de l’utilisateur (utiliser ng-model), puis à associer cette propriété à l’une des directives intégrées mentionnées ci-dessus.

Lorsque l’utilisateur modifie l’interface utilisateur, Angular met automatiquement à jour les éléments associés sur la page.


Q1 semble être un bon exemple pour ng-class – le style CSS peut être capturé dans une classe.

ng-class accepte une “expression” qui doit correspondre à l’une des options suivantes:

  1. une chaîne de noms de classe séparés par des espaces
  2. un tableau de noms de classe
  3. une carte / object de noms de classes à des valeurs booléennes

En supposant que vos éléments sont affichés en utilisant ng-repeat sur certains modèles de tableaux, et que lorsque la case à cocher pour un élément est cochée, vous souhaitez appliquer la classe pending-delete :

 
... HTML to display the item ...

Ci-dessus, nous avons utilisé le type d’expression ng-class # 3 – un object map / object de noms de classes à valeurs booléennes.


Q2 semble être un bon exemple pour ng-style – le style CSS est dynamic, nous ne pouvons donc pas définir de classe pour cela.

ng-style accepte une “expression” qui doit évaluer:

  1. une carte / object de noms de style CSS à des valeurs CSS

Pour un exemple artificiel, supposez que l’utilisateur puisse saisir un nom de couleur dans une texbox pour la couleur d’arrière-plan (un sélecteur de couleur jQuery serait beaucoup plus pratique):

 
...


Violon pour les deux ci-dessus.

Le violon contient également un exemple de ng-show et de ng-hide . Si une case est cochée, en plus de la couleur d’arrière-plan qui devient rose, du texte est affiché. Si ‘rouge’ est entré dans la zone de texte, un div est masqué.

J’ai rencontré des problèmes lors de l’application de classes à l’intérieur d’éléments de tableau lorsque une classe était déjà appliquée à la table entière (par exemple, une couleur appliquée aux lignes impaires : Il semble que lorsque vous inspectez l’élément avec les outils de développement , element.style n’a aucun style assigné. Donc, au lieu d’utiliser ng-class , j’ai essayé d’utiliser ng-style , et dans ce cas, le nouvel atsortingbut CSS apparaît dans element.style . Ce code fonctionne très bien pour moi:

  [...amazing code...] {{ myvar }} [...more amazing code...]  

Myvar est ce que j’évalue et dans chaque cas, j’applique un style à chaque

fonction de la valeur de myvar , ce qui écrase le style actuel appliqué par la classe CSS pour l’ensemble de la table.

METTRE À JOUR

Si vous souhaitez appliquer une classe à la table, par exemple, lorsque vous visitez une page ou dans d’autres cas, vous pouvez utiliser cette structure:

 
  • Fondamentalement, ce dont nous avons besoin pour activer une classe ng est la classe à appliquer et une déclaration vraie ou fausse. True applique la classe et false non. Donc, nous avons ici deux vérifications de l’itinéraire de la page et un OU entre eux, donc si nous sums dans /route_a OU nous sums dans route_b , la classe active sera appliquée.

    Cela fonctionne simplement avec une fonction logique à droite qui renvoie true ou false.

    Ainsi, dans le premier exemple, ng-style est conditionné par trois déclarations. Si tous sont faux, aucun style n’est appliqué, mais suivant notre logique, au moins un sera appliqué, donc l’expression logique vérifiera quelle comparaison est vraie et parce qu’un tableau non vide est toujours vrai, cela va laissé un tableau comme retour et avec un seul vrai, étant donné que nous utilisons OR pour toute la réponse, le style restant sera appliqué.

    Au fait, j’ai oublié de vous donner la fonction isActive ():

     $rootScope.isActive = function(viewLocation) { return viewLocation === $location.path(); }; 

    NOUVELLE MISE À JOUR

    Ici, vous avez quelque chose que je trouve vraiment utile. Lorsque vous devez appliquer une classe en fonction de la valeur d’une variable, par exemple une icône en fonction du contenu du div , vous pouvez utiliser le code suivant (très utile dans ng-repeat ):

      

    Icônes de la police génial

    Cela fonctionne bien lorsque ng-class ne peut pas être utilisé (par exemple lors du styling SVG):

     ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}" 

    (Je pense que vous devez être sur le dernier Angular instable pour utiliser ng-attr-, je suis actuellement sur 1.1.4)

    J’ai publié un article sur le travail avec AngularJS + SVG. Il parle de cette question et de nombreuses autres. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

     span class="circle circle-{{selectcss(document.Extension)}}"> 

    et code

     $scope.selectcss = function (data) { if (data == '.pdf') return 'circle circle-pdf'; else return 'circle circle-small'; }; 

    css

     .circle-pdf { width: 24px; height: 24px; font-size: 16px; font-weight: 700; padding-top: 3px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; background-image: url(images/pdf_icon32.png); } 

    Cette solution a fait le tour pour moi

     ... 

    Une autre option lorsque vous avez besoin d’un style CSS simple d’une ou deux propriétés:

    Vue:

      [...amazing code...]  {{ element.myvar }}  [...more amazing code...]  

    Manette:

     $scope.getTrColor = function (colorIndex) { switch(colorIndex){ case 0: return 'red'; case 1: return 'green'; default: return 'yellow'; } }; 

    Voir l’exemple suivant

     < !DOCTYPE html>   Demo Changing CSS Classes Conditionally with Angular      Teams 

    Vous pouvez utiliser une expression ternaire. Il y a deux façons de faire ça:

    ou…

    A partir d’AngularJS v1.2.0rc, la ng-class et même la ng-class ng-attr-class échouent avec les éléments SVG (ils ont fonctionné plus tôt, même avec une liaison normale dans l’atsortingbut class)

    Plus précisément, aucun de ces travaux ne fonctionne maintenant:

     ng-class="current==this_element?'active':' ' " ng-attr-class="{{current==this_element?'active':' '}}" class="class1 class2 .... {{current==this_element?'active':''}}" 

    Comme solution de contournement, je dois utiliser

     ng-attr-otherAttr="{{current==this_element?'active':''}}" 

    et ensuite utiliser le style

     [otherAttr='active'] { ... styles ... } 

    Un autre moyen (à l’avenir) d’appliquer le style de manière conditionnelle consiste à créer de manière conditionnelle un style défini.

      

    Mais de nos jours, seul FireFox prend en charge les styles ciblés.

    Eh bien, je vous suggère de vérifier la condition dans votre contrôleur avec une fonction renvoyant true ou false .

     
    {{day.date}}

    et dans votre contrôleur vérifier la condition

      $scope.getTodayForHighLight = function(today, date){ return (today == date); } 

    Il y a une autre option que j’ai découverte récemment et que certaines personnes peuvent trouver utile car elle vous permet de changer une règle CSS dans un élément de style, évitant ainsi le recours répété à une directive angular telle que ng-style, ng-class, ng-show, ng-hide, ng-animate et autres.

    Cette option utilise un service avec des variables de service définies par un contrôleur et surveillées par une directive d’atsortingbut que j’appelle “style personnalisé”. Cette stratégie pourrait être utilisée de différentes manières et j’ai tenté de donner des indications générales sur ce violon .

     var app = angular.module('myApp', ['ui.bootstrap']); app.service('MainService', function(){ var vm = this; }); app.controller('MainCtrl', function(MainService){ var vm = this; vm.ms = MainService; }); app.directive('customStyle', function(MainService){ return { ressortingct : 'A', link : function(scope, element, attr){ var style = angular.element(''); element.append(style); scope.$watch(function(){ return MainService.theme; }, function(){ var css = ''; angular.forEach(MainService.theme, function(selector, key){ angular.forEach(MainService.theme[key], function(val, k){ css += key + ' { '+k+' : '+val+'} '; }); }); style.html(css); }, true); } }; }); 

    Une chose à surveiller est que si le style CSS comporte des tirets, vous devez les supprimer. Donc, si vous voulez définir la background-color , la manière correcte est la suivante:

     ng-style="{backgroundColor:myColor}"