Hinzufügen mehrerer Klassen mit ng-class

Können wir mehrere Ausdrücke haben, um mehrere ng-Klassen hinzuzufügen?

für zB.

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

Wenn ja, kann jemand das Beispiel dafür aufstellen.

.

So wenden Sie verschiedene Klassen an, wenn verschiedene Ausdrücke Folgendes ergeben true:

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

So wenden Sie mehrere Klassen an, wenn ein Ausdruck wahr ist:

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

oder ganz einfach:

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

Beachten Sie die einfachen Anführungszeichen, die CSS-Klassen umgeben.

Für die ternäre Operator-Notation:

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

Ja, Sie können mehrere Ausdrücke verwenden, um mehrere Klassen in der ng-Klasse hinzuzufügen.

Zum Beispiel:

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

Eine unglaublich mächtige Alternative zu anderen Antworten hier:

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

Einige Beispiele:

1. Fügt einfach 'class1 class2 class3' zum div hinzu:

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

2. Fügt div je nach $ index 'ungerade' oder 'gerade' Klassen hinzu:

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

3. Erstellt dynamisch eine Klasse für jedes Div basierend auf $ index

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

Wenn $index=5dies zu folgenden Ergebnissen führt:

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

Hier ist ein Codebeispiel, das Sie ausführen können:

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>

Mithilfe einer $scopeMethode auf dem Controller können Sie berechnen, welche Klassen in der Ansicht ausgegeben werden sollen. Dies ist besonders praktisch, wenn Sie eine komplexe Logik zum Berechnen von Klassennamen haben und dadurch die Logikmenge in Ihrer Ansicht verringert wird, indem Sie sie auf den Controller verschieben:

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

    $scope.className = function() {

        var className = 'initClass';

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

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

        return className;
    };
});

und in der Ansicht einfach:

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

Ihr Beispiel funktioniert für konditionierte Klassen (der Klassenname zeigt an, ob der expressionDataXWert wahr ist):

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

Sie können auch mehrere Klassen hinzufügen, die vom Benutzer des Elements bereitgestellt werden:

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

Verwendungszweck:

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

Hier ist ein Beispiel für den Vergleich mehrerer Winkel-UI-Router-Zustände mit OR || Operator:

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

Es gibt dem li die Klassen Warnung und / oder aktiv, abhängig davon, ob die Bedingungen erfüllt sind.

Unter active und activemenu befinden sich Klassen und itemCount und ShowCart sind Ausdrucks- / Boolesche Werte.

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

Mit mehreren Bedingungen

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

Dank Scotch.io einen anderen Weg gefunden

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

Dies war meine Referenz. PFAD

Auf andere Weise können wir eine Funktion erstellen, um "mit mehreren Klassen" zu steuern.

CSS

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

Skript

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

Es benutzen

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

Sie können sich bei Beispiel auf die vollständige Codepage in der ng-Klasse beziehen