Ajout de plusieurs classes à l'aide de ng-class


542

Pouvons-nous avoir plusieurs expressions pour ajouter plusieurs classes ng?

par exemple.

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

Si oui, quelqu'un peut-il donner l'exemple pour le faire.

.


17
Votre exemple fonctionne tel quel.
Steve Klösters du

Oui, j'ai juste à utiliser! Important en CSS pour le rendre visible. Je l'ai trouvé moi-même :)
Aditya Sethi

Ce que @stevuu a dit .. est ri8 ... votre question est une réponse
YaswanthJg

La valeur expressionData1 prend-elle généralement true / false ou une valeur de chaîne?
Martian2049

Réponses:


978

Pour appliquer différentes classes lorsque différentes expressions évaluent true:

<div ng-class="{class1 : expression1, class2 : expression2}">
    Hello World!
</div>

Pour appliquer plusieurs classes lorsqu'une expression est vraie:

<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
    Hello World!
</div>

ou tout simplement:

<div ng-class="{'class1 class2' : expression1}">
    Hello World!
</div>

Remarquez les guillemets simples entourant les classes CSS.


11
vous ne pouvez pas passer plusieurs classes comme ng-class = "{'class1 class2': expression1}" il suffit de tester cela et cela n'a pas fonctionné du tout, solution comme @CodeHater a dit "Pour appliquer plusieurs classes lorsqu'une expression est vraie:" l'astuce
d1jhoni1b

9
Dans 1.2.16, l'option multi-classe ( 'class1 class2': expression) semble fonctionner correctement, sauf que si vous réutilisez une classe, elle est supprimée lorsque l'expression bascule entre les options. Par exemple, avec 'commonClass class1': expression == true, 'commonClass class2': expression == falsecommonClass est perdu lorsque l'expression bascule entre vrai et faux.
BrianS

10
@BrianS Je ferais quelque chose comme ça:class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}
AlwaysALearner

@CodeHater merci. C'est à peu près ce que je prévois maintenant, il suffit de prendre un moment pour réparer le CSS.
BrianS

Est-ce ng-class="{'class1' : expression1, 'class2':expression1 }"possible? Pourriez-vous regarder ma question: stackoverflow.com/questions/25391692/…
Danger14

48

Pour la notation de l'opérateur ternaire:

<div ng-class="expression1? 'class1 class2' : 'class3 class4'">

Celui-ci ne fonctionne pas pour moi. <span ng-class = "params.isAdmin? 'fa fa-lock fa-2x': 'fa fa-unlock fa-2x'"> </span>. La console générera une erreur.
TommyQu

en utilisant cette méthode, puis-je ajouter une autre expression?
Randonnée Nalbandyan

6
@HikeNalbandyan oui, vous pouvez aussi ajouter une autre expression:ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"
mahi-man

47

Oui, vous pouvez avoir plusieurs expressions pour ajouter plusieurs classes dans ng-class.

Par exemple:

<div ng-class="{class1:Result.length==2,class2:Result.length==3}"> Dummy Data </div>

45

Une alternative incroyablement puissante aux autres réponses ici:

ng-class="[  { key: resulting-class-expression }[ key-matching-expression ], ..  ]"

Quelques exemples:

1. Ajoute simplement «class1 class2 class3» à la div:

<div ng-class="[{true: 'class1'}[true], {true: 'class2 class3'}[true]]"></div>

2. Ajoute des classes "impaires" ou "paires" à div, en fonction de l'index $:

<div ng-class="[{0:'even', 1:'odd'}[ $index % 2]]"></div>

3. Crée dynamiquement une classe pour chaque div basée sur $ index

<div ng-class="[{true:'index'+$index}[true]]"></div>

Si $index=5cela se traduit par:

<div class="index5"></div>

Voici un exemple de code que vous pouvez exécuter:

var app = angular.module('app', []); 
app.controller('MyCtrl', function($scope){
  $scope.items = 'abcdefg'.split('');
}); 
.odd  { background-color: #eee; }
.even { background-color: #fff; }
.index5 {background-color: #0095ff; color: white; font-weight: bold; }
* { font-family: "Courier New", Courier, monospace; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="item in items"
    ng-class="[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]">
    index {{$index}} = "{{item}}" ng-class="{{[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]].join(' ')}}"
  </div>
</div>


2
Réponse brillante! J'ai toujours utilisé des fonctions pour des ng-classdirectives plus complexes , comme lorsque j'avais besoin d'appliquer un ternaire et une expression standard sur le même élément. J'ai soumis une modification à la réponse acceptée pour inclure l'utilisation de tableaux d'expressions.
Daniel Bonnell

Je ne suis pas un expert angulaire, mais il semble que cette construction: [{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]peut être simplifiée comme ça ['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]. Je viens de l'essayer dans Angular 1.5.9 et cela fonctionne :) Merci pour une excellente réponse!
vadipp

30

En utilisant une $scopeméthode sur le contrôleur, vous pouvez calculer les classes à afficher dans la vue. C'est particulièrement pratique si vous avez une logique complexe pour calculer les noms de classe et cela réduira la quantité de logique dans votre vue en la déplaçant vers le contrôleur:

app.controller('myController', function($scope) {

    $scope.className = function() {

        var className = 'initClass';

        if (condition1())
            className += ' class1';

        if (condition2())
            className += ' class2';

        return className;
    };
});

et dans la vue, simplement:

<div ng-class="className()"></div>

1
Si la classe change après le rendu, la classe ng écoute-t-elle toujours les changements dans className?
remarsh

3
À mon humble avis, la portée ne devrait exposer la condition . Il devrait appartenir aux ng-liaisons HTML de déterminer quelle classe utiliser lorsque cette condition est remplie.
Alnitak

1
Cela remplace l'attribut class dans les éléments dom. Si l'on utilise cela, ils doivent inclure les classes qui n'ont pas besoin de conditions dans le retour className.
phuwin

21

Votre exemple fonctionne pour les classes conditionnées (le nom de la classe indiquera si le expressionDataXest vrai):

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

Vous pouvez également ajouter plusieurs classes, fournies par l'utilisateur de l'élément:

<div ng-class="[class1, class2]"></div>

Usage:

<div class="foo bar" class1="foo" class2="bar"></div>


3
Savez-vous s'il est possible de combiner les deux types de modèle, c'est-à-dire d'avoir une classe conditionnelle utilisant {}et une classe liée aux données utilisant []?
jwg

3
Pour autant que je sache, ce n'est pas possible. De plus, il n'est pas possible de mettre deux ngClassdirectives sur un élément.
Seldary

Merci! Cela semble être confirmé ailleurs.
jwg

2
vous serez surpris: <a href="#/u/[[msg.from]]" ng-bind="msg.from" class="name, ng-class:[users[msg.from].nice, users[msg.from].star];" ng-class="{premium: users[msg.from].premium}"></a>et plus encore: scotch.io/tutorials/javascript/the-many-ways-to-use-ngclass
mayankcpdixit

1
@jwg: vous pouvez combiner deux types de modèles et c'est ici: stackoverflow.com/questions/29230732/…
satish kumar V

12

Voici un exemple comparant plusieurs états de routeur angulaire-ui en utilisant le OR || opérateur:

<li ng-class="
    {
        warning:
            $state.includes('out.pay.code.wrong')
            || $state.includes('out.pay.failed')
        ,
        active:
            $state.includes('out.pay')
    }
">

Il donnera au li les classes d'avertissement et / ou actives, selon que les conditions sont remplies.


Je ne me souviens pas vraiment. N'est-ce pas logique cependant?
nitech

Merci d'avoir précisé que plusieurs classes peuvent être appliquées à partir du même bloc ng-class, tant que chacune de leurs conditions est remplie.
cedricdlb

6

Sous active et activemenu se trouvent les classes et itemCount et ShowCart est l'expression / les valeurs booléennes.

ng-class="{'active' : itemCount, 'activemenu' : showCart}"

5

Avec plusieurs conditions

<div ng-class="{'class1' : con1 || can2, 'class2' : con3 && con4}">
Hello World!
</div>

4

Trouvé autrement grâce à Scotch.io

<div ng-repeat="step in steps" class="step-container step" ng-class="[step.status, step.type]" ng-click="onClick(step.type)">

C'était ma référence.CHEMIN


3

Autre moyen, nous pouvons créer une fonction pour contrôler "en utilisant plusieurs classes"

CSS

 <style>
    .Red {
        color: Red;
    }
    .Yellow {
        color: Yellow;
    }
      .Blue {
        color: Blue;
    }
      .Green {
        color: Green;
    }
    .Gray {
        color: Gray;
    }
    .b {
         font-weight: bold;
    }
</style>

Scénario

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    if (strValue == ("It is Red"))
                        return "Red";
                    else if (strValue == ("It is Yellow"))
                        return "Yellow";
                    else if (strValue == ("It is Blue"))
                        return "Blue";
                    else if (strValue == ("It is Green"))
                        return "Green";
                    else if (strValue == ("It is Gray"))
                        return "Gray";
                }
        }]);
</script>

En l'utilisant

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.