AngularJS ng-class if-else-Ausdruck

257

Mit AngularJSbenutze ich ng-classfolgenden Weg:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>

Ich frage mich, ob ich den if-elseAusdruck verwenden kann, um etwas Ähnliches zu tun:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

Wann immer call.Statevon jedem Wert abweichen firstoder ihn secondverwenden classCund vermeiden, jeden Wert anzugeben?

angularjs ng-class Dor Cohen
quelle

Antworten:

523

Verwenden Sie verschachtelte Inline-Wenn-Dann-Anweisungen ( Ternäre Operatoren ).

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

zum Beispiel :

<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
    ...
</div>

Und stellen Sie sicher, dass es für Ihre Kollegen lesbar ist :)

Jossef Harush
quelle
2
Was ist, wenn ich zwei Klassen hinzufügen muss?
Mircobabini
2
Entschuldigung, ich meine "eine Klasse, wenn dies UND eine andere Klasse, wenn das". Zwei Klassen, zwei verschiedene Bedingungen.
Mircobabini
17
@mircobabini, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"wie Sie in der Frage oben sehen können
Jossef Harush
2
Dies möchte ich nicht in der Ansicht sehen. Viel zu viel Logik für die Ansicht.
AturSams
19
@ Zehelvion Ich würde nicht zustimmen müssen. Dies ist Ansichtslogik. Sie möchten nicht vorschreiben, welche Spaltenklasse in Ihrem Controller oder einem Dienst verwendet werden soll. Hier sollte es sein.
Nick
108

Sie könnten versuchen, eine solche Funktion zu verwenden:

<div ng-class='whatClassIsIt(call.State)'>

Dann setzen Sie Ihre Logik in die Funktion selbst:

    $scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
     else
         return "ClassC";
    }

Ich habe eine Geige mit einem Beispiel gemacht: http://jsfiddle.net/DotDotDot/nMk6M/

Punkt Punkt Punkt
quelle
6
Dies ist eine viel bessere Lösung als verschachtelte ternäre Operatoren
David sagt Reinstate Monica
2
Liebe es. Dies hält das HTML noch sauberer als eine einfache Bedingung der ng-Klasse.
Mrgnw
17
Das Problem bei diesem Ansatz ist, dass Sie den Controller jetzt auf CSS-Klassen aufmerksam machen. Kein guter Ansatz. Es ist die bessere Lösung, eine Variable im Controller festzulegen und dann anhand der Variablen zu bestimmen, welche Klasse im HTML verwendet werden soll.
VtoCorleone
1
Dies ist nur ein Hinweis darauf, wie Sie dies tun können. Dieses Problem war einfach genug, um mit einem ternären Operator behandelt zu werden. Wenn Sie jedoch mehr Logik benötigen, möchten Sie dies nicht direkt im HTML-Code tun. Eine der schnellsten Lösungen ist dies Wie ich, um eine Funktion in Ihrem Controller dafür zu verwenden (wenn Sie nicht möchten, dass der Controller das CSS kennt, können Sie auch eine Bereichsvariable überwachen und festlegen und eine Bedingung im HTML basierend auf diesem Wert verwenden ). Wenn Sie jedoch etwas mehr Logik oder viele Wiederholungen haben, setzen Sie dies in eine Direktive, es sollte sauberer sein. Das Beispiel war hauptsächlich über das NICHT
Einfügen von
1
Besser als ternäre Operatoren, wenn Sie Bedingungen für mehr als 2 oder 3 verschiedene Klassen hinzufügen müssen, trennen Sie das HTML mit der Logik :)
Tho Vo
61

Ich hatte eine Situation, in der ich zwei 'if'-Aussagen brauchte, die sowohl wahr werden konnten als auch ein' else 'oder einen Standardwert, wenn beides nicht wahr war. Ich war mir nicht sicher, ob dies eine Verbesserung von Jossefs Antwort darstellt, aber es schien mir sauberer: 

ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"

Wo value.one und value.two wahr sind, haben sie Vorrang vor der .else-Klasse

joel.bowen
quelle
13

Klar ! Wir können eine Funktion erstellen, um einen CSS-Klassennamen mit dem folgenden vollständigen Beispiel zurückzugeben. Geben Sie hier die Bildbeschreibung ein

CSS

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

JS

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

Und dann 

<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>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

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

Lewis Hai
quelle
3

Die oben genannten Lösungen haben bei Klassen mit Hintergrundbildern irgendwie nicht funktioniert. Ich habe eine Standardklasse erstellt (die, die Sie sonst benötigen) und set class = 'defaultClass' und dann ng-class = "{class1: abc, class2: xyz}" gesetzt.

<span class="booking_warning" ng-class="{ process_success: booking.bookingStatus == 'BOOKING_COMPLETED' || booking.bookingStatus == 'BOOKING_PROCESSED', booking_info: booking.bookingStatus == 'INSTANT_BOOKING_REQUEST_RECEIVED' || booking.bookingStatus == 'BOOKING_PENDING'}"> <strong>{{booking.bookingStatus}}</strong> </span>

PS: Die Klassen, die sich in einem Zustand befinden, sollten die Standardklasse überschreiben, dh als! Wichtig markiert

Kazim Homayee
quelle
1

Dies ist der beste und zuverlässigste Weg, dies zu tun. Hier ist ein einfaches Beispiel und danach können Sie Ihre benutzerdefinierte Logik entwickeln:

//In .ts
public showUploadButton:boolean = false;

if(some logic)
{
    //your logic
    showUploadButton = true;
}

//In template
<button [class]="showUploadButton ? 'btn btn-default': 'btn btn-info'">Upload</button>
Avtandil Kavrelishvili
quelle
0

Eine meiner Problemumgehungen besteht darin, eine Modellvariable nur für das Umschalten der ng-Klasse zu manipulieren:

Zum Beispiel möchte ich die Klasse entsprechend dem Status meiner Liste umschalten:

1) Immer wenn meine Liste leer ist, aktualisiere ich mein Modell:

$scope.extract = function(removeItemId) {
    $scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId});
    if (!$scope.list.length) {
        $scope.liststate = "empty";
    }
}

2) Immer wenn meine Liste nicht leer ist, setze ich einen anderen Status

$scope.extract = function(item) {
    $scope.list.push(item);
    $scope.liststate = "notempty";
}

3) Wenn meine Liste nie berührt wird, möchte ich eine andere Klasse geben (hier wird die Seite initiiert):

$scope.liststate = "init";

3) Ich benutze dieses zusätzliche Modell für meine ng-Klasse:

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"
Bahadir Tasdemir
quelle
0

Verwenden Sie es so:

    <div [ngClass]="{cssClass A: condition 1, cssClass B: condition 2, cssClass C: condition 3}">...</div>
BLACKRIGAN
quelle
-3

Sie können diese Methode ausprobieren:

</p><br /><br />
<p>ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}<br /><br /><br />

ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}

Vollständige Details erhalten Sie hier .

Ehtesham Shami
quelle