web-dev-qa-db-fra.com

Ajouter plusieurs classes en utilisant ng-class

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

pour par exemple.

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

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

.

angularjsng-class
504
Aditya Sethi

Pour appliquer différentes classes lorsque différentes expressions ont pour valeur 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.

912
AlwaysALearner

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>
47
Sumit Gupta

Pour la notation d'opérateur ternaire:

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

ne 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 "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 en fonction de $ index

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

Si $index=5, cela aura pour résultat:

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

En utilisant une méthode $scope sur le contrôleur, vous pouvez calculer les classes à afficher dans la vue. Ceci est particulièrement utile si vous avez une logique complexe pour calculer les noms de classe et cela réduira la quantité de logique dans votre vue en le 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
Ahmad M

Votre exemple fonctionne pour les classes conditionnées (le nom de la classe indiquera si la variable expressionDataX est vraie):

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

20
seldary

Voici un exemple comparant plusieurs états angular-ui-router à l’aide de OR || opérateur:

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

Les classes seront averties et/ou actives, selon que les conditions sont remplies ou non.

10
nitech

Actif et activemenu sont les classes et itemCount et ShowCart les valeurs expression/boolean.

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

Avec de multiples conditions

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

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. https://scotch.io/tutorials/the-many-ways-to-use-ngclass

4
Emiliano Barboza

Autre moyen de 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 à l’adresse exemple: ng-class

3
Lewis Hai