Quel est le meilleur moyen d’appliquer une classe de manière conditionnelle?

Disons que vous avez un tableau qui est rendu dans une ul avec un li pour chaque élément et une propriété sur le contrôleur appelé selectedIndex . Quelle serait la meilleure façon d’append une classe au li avec l’index selectedIndex dans AngularJS?

Je duplique actuellement (à la main) le code li et ajoute la classe à l’un des tags li et utilise ng-show et ng-hide pour afficher un seul li par index.

Si vous ne voulez pas placer les noms de classe CSS dans Controller comme je le fais, voici un vieux truc que j’utilise depuis les jours pré-v1. Nous pouvons écrire une expression qui évalue directement un nom de classe sélectionné , aucune directive personnalisée n’est nécessaire:

 ng:class="{true:'selected', false:''}[$index==selectedIndex]" 

S’il vous plaît noter l’ancienne syntaxe avec deux-points.

Il y a aussi une nouvelle façon d’appliquer les classes de manière conditionnelle, comme:

 ng-class="{selected: $index==selectedIndex}" 

Angular prend désormais en charge les expressions qui renvoient un object. Chaque propriété (nom) de cet object est maintenant considérée comme un nom de classe et est appliquée en fonction de sa valeur.

Cependant, ces manières ne sont pas fonctionnellement égales. Voici un exemple:

 ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]" 

Nous pourrions donc réutiliser des classes CSS existantes en mappant fondamentalement une propriété de modèle à un nom de classe et en même temps, en maintenant les classes CSS hors du code du contrôleur.

ng-class prend en charge une expression qui doit évaluer soit

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

Donc, en utilisant le formulaire 3), nous pouvons simplement écrire

 ng-class="{'selected': $index==selectedIndex}" 

Voir aussi Comment appliquer de manière conditionnelle les styles CSS dans AngularJS? pour une réponse plus large.


Mise à jour : Angular 1.1.5 a ajouté un support pour un opérateur ternaire , donc si cette construction vous est plus familière:

 ng-class="($index==selectedIndex) ? 'selected' : ''" 

Ma méthode préférée est d’utiliser l’expression ternaire.

 ng-class="condition ? 'trueClass' : 'falseClass'" 

Note: Si vous utilisez une ancienne version d’Angular, vous devriez plutôt l’utiliser,

 ng-class="condition && 'trueClass' || 'falseClass'" 

J’appendai à cela, car certaines de ces réponses semblent dépassées. Voici comment je le fais:

  

Où ‘isSelected’ est une variable javascript définie dans le contrôleur angular de scope.

Pour répondre plus précisément à votre question, voici comment générer une liste avec cela:

HTML

 
  • {{item.name}}
  • JS

     function ListCtrl($scope) { $scope.list = [ {"name": "Item 1", "isSelected": "active"}, {"name": "Item 2", "isSelected": ""} ] } 

    Voir: http://jsfiddle.net/tTfWM/

    Voir: http://docs.angularjs.org/api/ng.directive:ngClass

    Voici une solution beaucoup plus simple:

     function MyControl($scope){ $scope.values = ["a","b","c","d","e","f"]; $scope.selectedIndex = -1; $scope.toggleSelect = function(ind){ if( ind === $scope.selectedIndex ){ $scope.selectedIndex = -1; } else{ $scope.selectedIndex = ind; } } $scope.getClass = function(ind){ if( ind === $scope.selectedIndex ){ return "selected"; } else{ return ""; } } $scope.getButtonLabel = function(ind){ if( ind === $scope.selectedIndex ){ return "Deselect"; } else{ return "Select"; } } } 
     .selected { color:red; } 
      
    • {{value}}

    Selected: {{selectedIndex}}

    J’ai récemment fait face à un problème similaire et j’ai décidé de créer un filtre conditionnel:

      angular.module('myFilters', []). /** * "if" filter * Simple filter useful for conditionally applying CSS classes and decouple * view from controller */ filter('if', function() { return function(input, value) { if (typeof(input) === 'ssortingng') { input = [input, '']; } return value? input[0] : input[1]; }; }); 

    Il prend un seul argument, qui est soit un tableau à 2 éléments, soit une chaîne, qui devient un tableau auquel est ajoutée une chaîne vide en tant que second élément:

     
  • ...
  • Si vous voulez aller au-delà de l’évaluation binary et garder votre CSS hors de votre contrôleur, vous pouvez implémenter un filtre simple qui évalue l’entrée par rapport à un object map:

     angular.module('myApp.filters, []) .filter('switch', function () { return function (input, map) { return map[input] || ''; }; }); 

    Cela vous permet d’écrire votre balisage comme ceci:

     
    ...

    L’opérateur ternaire vient d’être ajouté à l’parsingur angular en 1.1.5 .

    La manière la plus simple de procéder est donc la suivante:

     ng:class="($index==selectedIndex)? 'selected' : ''" 

    C’est ce que j’ai fait récemment qui faisait ça:

      

    La valeur isShowing est une valeur située sur mon contrôleur qui est basculée d’un clic sur un bouton et les parties entre les parenthèses sont des classes créées dans mon fichier CSS.

    EDIT: J’aimerais aussi append que codeschool.com a un cours gratuit sponsorisé par Google sur AngularJS, qui couvre tous ces aspects, puis certains. Il n’y a pas besoin de payer pour rien, il suffit de vous inscrire pour un compte et de commencer! Bonne chance à vous tous!

    Nous pouvons faire une fonction pour gérer la classe de retour avec condition

    entrer la description de l'image ici

      

    Et alors

      

    AngularJS ng-class if example

    • {{icolor}}


    Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"

    • {{icolor}}

    Vous pouvez vous référer à la page de code complète à ng-class si exemple

    Je suis nouveau sur Angular mais j’ai trouvé cela pour résoudre mon problème:

      

    Cela appliquera conditionnellement une classe basée sur un var. Il commence par un téléchargement d’icons par défaut, l’utilisation de ng-class, je vérifie l’état de showDetails si true/false et applique une icône de téléchargement de classe. C’est très bien.

    J’espère que cela aide.

    Cela fonctionne correctement;)

      

    Cela sera probablement réduit à l’oubli, mais voici comment j’ai utilisé les opérateurs ternaires de la version 1.1.5 pour changer de classe selon qu’une ligne de la table est la première, la deuxième ou la dernière, sauf s’il y a une seule ligne dans la table:

       

    Voici une autre option qui 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)

    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); } 

    partiel

       

    manette

      $scope.campaign_range = "all"; $scope.change_range = function(range) { if (range === "all") { $scope.campaign_range = "all" } else { $scope.campaign_range = "thismonth" } }; 

    Ceci est dans mon travail multiple juge conditionnellement:

     
  • {{eOption.eoSequence}}     |     2020 元
  • Si vous utilisez une pré- angular v1.1.5 (c’est-à-dire sans opérateur ternaire) et que vous souhaitez toujours définir une valeur équivalente dans les deux conditions, vous pouvez faire quelque chose comme ceci:

     ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}" 

    Si vous avez une classe commune appliquée à de nombreux éléments, vous pouvez créer une directive personnalisée qui appenda cette classe comme ng-show / ng-hide.

    Cette directive appenda la classe ‘active’ au bouton si on clique dessus

     module.directive('ngActive', ['$animate', function($animate) { return function(scope, element, attr) { scope.$watch(attr.ngActive, function ngActiveWatchAction(value){ $animate[value ? 'addClass' : 'removeClass'](element, 'active'); }); }; }]); 

    Plus d’informations

    Il suffit d’append quelque chose qui a fonctionné pour moi aujourd’hui, après beaucoup de recherches …

     

    J’espère que cela vous aidera dans votre développement.

    =)

    Syntaxe de l’expression non documentée: Great Website Link … =)

    Vérifiez http://www.codinginsight.com/angularjs-if-else-statement/

    La fameuse déclaration angularjs if else !!! Lorsque j’ai commencé à utiliser Angularjs, j’étais un peu surpris de ne pas pouvoir trouver une déclaration if / else.

    Je travaillais donc sur un projet et j’ai remarqué que lors de l’utilisation de l’instruction if / else, la condition s’affiche lors du chargement. Vous pouvez utiliser ng-cloak pour résoudre ce problème.

     

    Show this line

    Show this line instead

    .ng-cloak { display: none }

    Merci amadou

    Vous pouvez utiliser ce paquet npm. Il gère tout et dispose d’options pour les classes statiques et conditionnelles basées sur une variable ou une fonction.

     // Support for ssortingng arguments getClassNames('class1', 'class2'); // support for Object getClassNames({class1: true, class2 : false}); // support for all type of data getClassNames('class1', 'class2', ['class3', 'class4'], { class5 : function() { return false; }, class6 : function() { return true; } });