Aggiungi più classi con ng classe, in cui una delle classi è subordinata

Question

ho ottenuto questo codice:

ng-class="{selectedHeader: key == selectedCol}" 

Funziona, ma vorrei anche aggiungere il valore 'chiave' come una classe troppo, Ive ha provato :

ng-class="[{selectedHeader: key == selectedCol}, key]" 

Ma non funzionerà, qualcuno sa come risolvere questo?

Answer 1

Se si vuole sempre key da aggiungere come classe:

ng-class="{selectedHeader: key == selectedCol, key: true]" 

oppure si può semplicemente mettere in un attributo class con {{}} interpolazione.

ng-class="{selectedHeader: key == selectedCol}" class="{{key}}" 

Solo per completezza, se solo si desidera includere, se si tratta di uguale selectedCol:

ng-class="{selectedHeader: key == selectedCol, key: key == selectedCol}" 

Answer 2

lo si può fare da

ng-class="{selectedHeader: key == selectedCol}" class="{{key}}" 

Answer 3

Si potrebbe gestire questo utilizzando $scope metodi per definire quei nomi di classi dinamici. Questo qualcosa sarebbe simile a questa:

Controller:

$scope.selectedCol = 3; 
$scope.key = 3; 

// dynamic ng-class values 
$scope.selectedHeader = function() { 
    if ($scope.selectedCol === $scope.key) 
     return 'header-selected'; 
    else 
     return false; 
}; 

// selected header definition for ng-class 
$scope.headerKey = function() { 
    return 'header-' + $scope.key; 
}; 

Vista:

<header ng-class="[ selectedHeader(), headerKey() ]"> 
    <h1>Header element</h1> 
</header> 

Risultato:

<header ng-class="[ selectedHeader(), headerKey() ]" class="header-selected header-3"> 
     <h1>Header element</h1> 
</header> 

Answer 4

Penso che quello che stai cercando sia: ng-class="{ {{key}}:{{key}} }"

Ricorda inoltre che le classi di css non devono iniziare con un numero, quindi potresti dover aggiungere il prefisso al tuo valore chiave.

Answer 5

Prova questo:

class="{{key}} ng-class:{'selectedHeader': key == selectedCol}; 

Answer 6

questo non funzionerà perché {selectedHeader: chiave == selectedCol} saranno valutati come un oggetto e non come una stringa:

ng-class="[{selectedHeader: key == selectedCol}, key]" 

Il seguente codice di lavoro , aggiungerà le classi 'selectedHeader' e il valore della chiave:

ng-class="[key == selectedCol ? 'selectedHeader' : '', key]" 

Answer 7

// single class 
 
<div ng-class="{'myclass' : condition}"> 
 
</div> 
 
    
 
// multiple class 
 
<div ng-class="{'myclass1': condition1, 'myclass2': condition2}"> 
 
some content 
 
</div>