Agregar varias clases usando ng-class
ALERTA: ¡Este hilo es para el antiguo AngularJS!
¿Podemos tener múltiples expresiones para agregar múltiples ng-class?
por ej.
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
En caso afirmativo, ¿alguien puede poner el ejemplo para hacerlo?
.
Para aplicar diferentes clases cuando diferentes expresiones se evalúan como true:
<div ng-class="{class1 : expression1, class2 : expression2}">
Hello World!
</div>
Para aplicar varias clases cuando una expresión es verdadera:
<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
Hello World!
</div>
o simplemente:
<div ng-class="{'class1 class2' : expression1}">
Hello World!
</div>
Observe las comillas simples que rodean las clases CSS.
Para la notación del operador ternario:
<div ng-class="expression1? 'class1 class2' : 'class3 class4'">
Una alternativa increíblemente poderosa a otras respuestas aquí:
ng-class="[ { key: resulting-class-expression }[ key-matching-expression ], .. ]"
Algunos ejemplos:
1. Simplemente agrega 'clase1 clase2 clase3' al div:
<div ng-class="[{true: 'class1'}[true], {true: 'class2 class3'}[true]]"></div>
2. Agrega clases 'pares' o impares a div, según el índice $:
<div ng-class="[{0:'even', 1:'odd'}[ $index % 2]]"></div>
3. Crea dinámicamente una clase para cada div basada en $index
<div ng-class="[{true:'index'+$index}[true]]"></div>
Si $index=5esto resultará en:
<div class="index5"></div>
Aquí hay un ejemplo de código que puede ejecutar:
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>