AngularJS espressione if-else di classe ng

257

Con AngularJSsto usando ng-classil seguente modo:

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

Mi chiedo se posso usare l' if-elseespressione per fare qualcosa di simile a questo:

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

Quindi ogni volta che call.Statedifferisce firsto secondusa classCed evita di specificare ogni valore?

angularjs ng-class

— Dor Cohen
fonte

523

Usa istruzioni if-then inline nidificate ( operatori ternari )

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

per esempio :

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

E assicurati che sia leggibile dai tuoi colleghi :)

— Jossef Harush
fonte

2

Cosa succede se devo aggiungere due classi?

— mircobabini,

2

Scusate, intendo "una classe se questa E un'altra classe se quella". Due classi, due diverse condizioni.

— mircobabini,

17

@mircobabini, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"come puoi vedere nella domanda sopra

— Jossef Harush

2

Questo non è qualcosa che voglio vedere nella vista. Troppa logica per la vista.

— AturSams,

19

@Zehelvion Non dovrei essere d'accordo. Questa è la logica della vista. Non vorrai dettare quale classe di colonna utilizzare nel controller o in un servizio .. questo è dove dovrebbe essere.

— Nick,

108

potresti provare usando una funzione del genere:

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

Quindi inserisci la tua logica nella funzione stessa:

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

Ho fatto un violino con un esempio: http://jsfiddle.net/DotDotDot/nMk6M/

— Punto punto punto
fonte

6

Questa è una soluzione molto migliore degli operatori ternari nidificati

— David dice Reinstate Monica il

2

Lo adoro. Ciò mantiene l'html ancora più pulito di un semplice condizionale di classe ng.

— mrgnw,

17

Il problema con questo approccio è che stai rendendo il controller consapevole delle classi CSS. Non è un buon approccio. Avere una variabile impostata nel controller e quindi determinare quale classe utilizzare nell'HTML dalla variabile è la soluzione migliore.

— VtoCorleone,

1

Questo è solo un suggerimento su come puoi farlo, questo problema era abbastanza semplice da essere trattato con un operatore ternario, ma quando hai bisogno di più logica non vuoi farlo direttamente nell'HTML, una delle soluzioni più veloci è , come ho fatto io, per usare una funzione nel tuo controller (se non vuoi che il controller sia a conoscenza del CSS, puoi anche guardare e impostare una variabile scope e usare una condizione nell'HTML basata su quel valore ). Ma, se hai un po 'più di logica, o molte ripetizioni, inseriscilo in una direttiva, dovrebbe essere più pulito. L'esempio riguardava principalmente il NON mettere la logica in HTML

— DotDotDot,

1

meglio degli operatori ternari se è necessario aggiungere condizioni per più di 2 o 3 classi diverse, separare l'html con la logica :)

— Tho Vo

61

Ho avuto una situazione in cui avevo bisogno di due affermazioni "if" che potevano entrambe diventare vere e un "altro" o predefinito se nessuno dei due fosse vero, non sono sicuro che si tratti di un miglioramento nella risposta di Jossef ma mi è sembrato più pulito:

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

Dove value.one e value.two sono veri, hanno la precedenza sulla classe .else

— joel.bowen
fonte

13

Chiaramente ! Possiamo creare una funzione per restituire un nome di classe CSS con il seguente esempio completo.

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>

E poi

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

Puoi fare riferimento alla pagina di codice completa in ng-class, se esempio

— Lewis Hai
fonte

3

Le soluzioni di cui sopra non hanno funzionato per me per le lezioni con immagini di sfondo in qualche modo. Quello che ho fatto è stato creare una classe predefinita (quella di cui hai bisogno in altro) e impostare class = 'defaultClass' e poi ng-class = "{class1: abc, class2: xyz}"

<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: Le classi in condizione dovrebbero sovrascrivere la classe predefinita, ovvero contrassegnata come! Important

— Kazim Homayee
fonte

1

Questo è il modo migliore e affidabile per farlo. Ecco un semplice esempio e successivamente puoi sviluppare la tua logica personalizzata:

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

0

Una mia soluzione alternativa è manipolare una variabile di modello solo per la commutazione di classe ng:

Ad esempio, desidero attivare / disattivare la classe in base allo stato del mio elenco:

1) Ogni volta che la mia lista è vuota, aggiorno il mio modello:

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

2) Ogni volta che la mia lista non è vuota, ho impostato un altro stato

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

3) Quando la mia lista non viene mai toccata, voglio dare un'altra classe (è qui che viene avviata la pagina):

$scope.liststate = "init";

3) Uso questo modello aggiuntivo sulla mia classe ng:

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"

— Bahadir Tasdemir
fonte

0

Usalo in questo modo:

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

— BLACKRIGAN
fonte

-3

Puoi provare questo metodo:

</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'}

Puoi ottenere i dettagli completi da qui .

— Ehtesham Shami
fonte