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.

.

Aditya Sethi
la source
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.

AlwaysALearner
la source
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'">
Razan Paul
la source
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>
Sumit Gupta
la source
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>

Trousse
la source
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>
Ahmad M
la source
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>

Seldary
la source
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.

nitech
la source
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}"
Vivek Panday
la source
5

Avec plusieurs conditions

<div ng-class="{'class1' : con1 || can2, 'class2' : con3 && con4}">
Hello World!
</div>
Hemakumar
la source
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

Emiliano Barboza
la source
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

Lewis Hai
la source