it-swarm.com.de

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 dazu aufstellen.

.

504
Aditya Sethi

So wenden Sie unterschiedliche Klassen an, wenn unterschiedliche Ausdrücke als true ausgewertet werden:

<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 für CSS-Klassen.

912
AlwaysALearner

Ja, Sie können mehrere Ausdrücke haben, um mehrere Klassen in ng-class hinzuzufügen.

Zum Beispiel:

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

Für die ternäre Operatornotation:

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

Eine unglaublich leistungsfähige 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 je nach $ index 'ungerade' oder 'gerade' Klassen zu div 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=5, führt dies zu:

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

Mithilfe einer $scope -Methode auf dem Controller können Sie berechnen, welche Klassen in der Ansicht ausgegeben werden sollen. Dies ist besonders praktisch, wenn Sie eine komplexe Logik für die Berechnung von Klassennamen haben und die Logik in Ihrer Ansicht reduzieren, 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>
29
Ahmad M

Ihr Beispiel funktioniert für bedingte Klassen (der Klassenname zeigt an, ob expressionDataX 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>

20
seldary

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

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

Je nachdem, ob die Bedingungen erfüllt sind, werden die Klassen gewarnt und/oder aktiviert.

10
nitech

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

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

Mit mehreren Bedingungen

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

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

Das war meine Referenz. https://scotch.io/tutorials/the-many-ways-to-use-ngclass

4

Auf andere Weise können wir eine Funktion erstellen, um "unter Verwendung mehrerer 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 auf die vollständige Codepage unter ng-class wenn Beispiel verweisen

3
Lewis Hai