Aggiunta di più classi mediante ng-class


542

Possiamo avere più espressioni per aggiungere più ng-class?

per es.

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

Se sì, qualcuno può fare l'esempio per farlo.

.


17
Il tuo esempio funziona così com'è.
Steve Klösters,

Sì, ho dovuto usare! Important in css per renderlo visibile. L'ho trovato da solo :)
Aditya Sethi,

Cosa ha detto @stevuu .. è ri8 ... la tua domanda è risposta
YaswanthJg

Il valore expressionData1 di solito assume true / false o alcuni valori di stringa?
Martian2049,

Risposte:


978

Per applicare classi diverse quando espressioni diverse valutano true:

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

Per applicare più classi quando un'espressione è vera:

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

o semplicemente:

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

Nota le virgolette singole che circondano le classi CSS.


11
non puoi passare più classi come ng-class = "{'class1 class2': expression1}" prova solo questo e non ha funzionato affatto, soluzione come @CodeHater ha detto "Per applicare più classi quando un'espressione è vera:" il trucco
d1jhoni1b

9
In 1.2.16 l'opzione multi-class ( 'class1 class2': expression) sembra funzionare correttamente , tranne per il fatto che se riutilizzi una classe, questa viene eliminata quando l'espressione passa da un'opzione all'altra. Ad esempio, con 'commonClass class1': expression == true, 'commonClass class2': expression == falsecommonClass viene perso quando l'espressione passa da vero a falso.
BrianS,

10
@BrianS Vorrei fare qualcosa del genere:class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}
AlwaysALearner

@CodeHater grazie. È praticamente quello che sto pianificando ora, devo solo prendere un momento per sistemare il CSS.
BrianS

È ng-class="{'class1' : expression1, 'class2':expression1 }"possibile? Ti dispiacerebbe guardando la mia domanda: stackoverflow.com/questions/25391692/...
Danger14

48

Per la notazione dell'operatore ternario:

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

Questo non funziona per me. <span ng-class = "params.isAdmin? 'fa fa-lock fa-2x': 'fa fa-unlock fa-2x'"> </span>. La console genererà un errore.
TommyQu,

usando questo metodo, posso aggiungere un'altra espressione?
Hike Nalbandyan,

6
@HikeNalbandyan sì, puoi aggiungere anche un'altra espressione:ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"
mahi-man,

47

Sì, puoi avere più espressioni per aggiungere più classi in ng-class.

Per esempio:

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

45

Un'alternativa incredibilmente potente ad altre risposte qui:

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

Qualche esempio:

1. Aggiunge semplicemente 'class1 class2 class3' al div:

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

2. Aggiunge le classi 'dispari' o 'pari' al div, a seconda dell'indice $:

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

3. Crea dinamicamente una classe per ogni div in base a $ index

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

Se $index=5questo comporterà:

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

Ecco un esempio di codice che puoi eseguire:

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>


2
Risposta brillante! Ho sempre usato funzioni per ng-classdirettive più complesse , come quando avevo bisogno di applicare un'espressione ternaria e standard sullo stesso elemento. Ho inviato una modifica alla risposta accettata per includere l'uso di array di espressioni.
Daniel Bonnell,

Non sono un esperto angolare, ma sembra che questo costrutto: [{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]possa essere semplificato in questo modo ['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]. L'ho appena provato in Angular 1.5.9 e funziona :) Grazie per un'ottima risposta!
vadipp,

30

Utilizzando un $scopemetodo sul controller, è possibile calcolare quali classi emettere nella vista. Ciò è particolarmente utile se si dispone di una logica complessa per il calcolo dei nomi delle classi e ridurrà la quantità di logica nella vista spostandola sul controller:

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

    $scope.className = function() {

        var className = 'initClass';

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

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

        return className;
    };
});

e nella vista, semplicemente:

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

1
Se la classe cambia dopo il rendering, la classe ng sta ancora ascoltando le modifiche className?
rimessa in servizio il

3
IMHO, l'ambito dovrebbe solo esporre la condizione . Dovrebbe ng-spettare ai binding HTML determinare quale classe utilizzare quando viene soddisfatta tale condizione.
Alnitak,

1
Questo sovrascrive l'attributo di classe in elementi dom. Se uno lo usa, devono includere le classi che non hanno bisogno di condizioni nel reso className.
phuwin,

21

Il tuo esempio funziona per le classi condizionate (il nome della classe mostrerà se expressionDataXè vero):

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

Puoi anche aggiungere più classi, fornite dall'utente dell'elemento:

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

Uso:

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


3
Sai se è possibile combinare i due tipi di template, ovvero avere una classe condizionale usando {}e una classe legata ai dati usando []?
jwg

3
Per quanto ne so non è possibile. Inoltre, non è possibile mettere due ngClassdirettive su un elemento.
seldary

Grazie! Questo sembra essere confermato altrove.
jwg,

2
sarete sorpresi: <a href="#/u/[[msg.from]]" ng-bind="msg.from" class="name, ng-class:[users[msg.from].nice, users[msg.from].star];" ng-class="{premium: users[msg.from].premium}"></a>e altro: scotch.io/tutorials/javascript/the-many-ways-to-use-ngclass
mayankcpdixit

1
@jwg: puoi combinare due tipi di modelli ans è qui: stackoverflow.com/questions/29230732/…
satish kumar V

12

Ecco un esempio di confronto tra più stati angolari-ui-router utilizzando OR || operatore:

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

Darà alle classi le avvertenze e / o le attività attive, a seconda che siano soddisfatte le condizioni.


Non riesco proprio a ricordare. Non è logico però?
nitech,

Grazie per aver chiarito che è possibile applicare più classi dallo stesso blocco di classe n, purché tutte le loro condizioni siano soddisfatte.
Cedricdlb,

6

Sotto active e activemenu ci sono le classi e itemCount e ShowCart sono valori di espressione / booleani.

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

5

Con più condizioni

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

4

Ho trovato un altro modo grazie a Scotch.io

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

Questo era il mio riferimento. SENTIERO


3

In un altro modo possiamo creare una funzione per controllare "usando più classi"

CSS

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

copione

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

Usandolo

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

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.