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

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.

.

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.

Pour la notation de l'opérateur ternaire:

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

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>

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>

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>

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>

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.

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

Avec plusieurs conditions

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

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

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