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


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

par exemple.

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

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

.


435
2017-09-18 11:40


origine


Réponses:


Appliquer différentes classes lorsque différentes expressions sont évaluées 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>

Notez les guillemets simples entourant les classes CSS.


802
2017-09-18 12:05



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>

44
2017-11-25 10:02



Pour la notation de l'opérateur ternaire:

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

39
2018-04-15 02:09



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' au div:

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

2. Ajoute les classes 'impair' ou 'pair' à 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 en fonction de l'index $

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

Si $index=5 cela entraînera:

<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>


30
2018-02-10 03:51



Utilisant un $scope méthode sur le contrôleur, vous pouvez calculer quelles classes à afficher dans la vue. Ceci 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>

29
2017-10-22 12:32



Votre exemple fonctionne pour les classes conditionnées (le nom de la classe affichera si le expressionDataX est 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>


19
2018-02-13 08:51



Voici un exemple comparant plusieurs états du routeur angulaire-ui en utilisant l'opérateur || 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 d'actif, dépendant si les conditions sont remplies.


9
2018-03-24 08:58



Au-dessous de active et activemenu sont classes et itemCount et ShowCart est expression / valeurs booléennes.

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

6
2018-05-16 18:49



Avec plusieurs conditions

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

5
2017-10-28 07:05