Agregar múltiples clases usando ng-class

542

¿Podemos tener múltiples expresiones para agregar múltiples clases ng?

por ej.

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

En caso afirmativo, ¿alguien puede poner el ejemplo para hacerlo?

.

Aditya Sethi
fuente
17
Su ejemplo funciona tal cual.
Steve Klösters
Sí, solo tenía que usar! Important en css para hacerlo visible. Lo encontré solo :)
Aditya Sethi
Lo @stevuu dijo .. es RI8 ... ur pregunta es la respuesta
YaswanthJg
¿El valor expressionData1 generalmente toma verdadero / falso, o algún valor de cadena en realidad?
Martian2049

Respuestas:

978

Para aplicar diferentes clases cuando diferentes expresiones evalúan 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.

AlwaysALearner
fuente
11
no puede pasar varias clases como ng-class = "{'class1 class2': expression1}" simplemente pruebe eso y no funcionó en absoluto, la solución como @CodeHater dijo "Para aplicar varias clases cuando una expresión es verdadera:" eso hizo el truco
d1jhoni1b
99
En 1.2.16, la opción multiclase ( 'class1 class2': expression) parece funcionar bien, excepto que si reutiliza una clase, se descarta cuando la expresión alterna entre las opciones. Por ejemplo, con 'commonClass class1': expression == true, 'commonClass class2': expression == falsecommonClass se pierde cuando la expresión alterna entre verdadero y falso.
BrianS
10
@BrianS haría algo como esto:class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}
AlwaysALearner
@CodeHater gracias. Eso es más o menos lo que estoy planeando ahora, solo necesito tomarme un momento para arreglar el CSS.
BrianS
Es ng-class="{'class1' : expression1, 'class2':expression1 }"posible? ¿Le importaría mirar mi pregunta: stackoverflow.com/questions/25391692/…
Danger14
48

Para la notación de operador ternario:

<div ng-class="expression1? 'class1 class2' : 'class3 class4'">
Razan Paul
fuente
Este no funciona para mí. <span ng-class = "params.isAdmin? 'fa fa-lock fa-2x': 'fa fa-unlock fa-2x'"> </span>. La consola arrojará un error.
TommyQu
usando este método, ¿puedo agregar otra expresión?
Caminata Nalbandyan
66
@HikeNalbandyan sí, también puedes agregar otra expresión:ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"
mahi-man
47

Sí, puede tener múltiples expresiones para agregar múltiples clases en ng-class.

Por ejemplo:

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

Una alternativa increíblemente poderosa a otras respuestas aquí:

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

Algunos ejemplos:

1. Simplemente agrega 'class1 class2 class3' al div:

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

2. Agrega clases 'impares' o 'pares' a div, dependiendo del í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>

Equipo
fuente
2
Brillante respuesta! Siempre he usado funciones para ng-classdirectivas más complejas , como cuando necesitaba aplicar una expresión ternaria y estándar en el mismo elemento. He enviado una edición a la respuesta aceptada para incluir el uso de matrices de expresiones.
Daniel Bonnell
No soy un experto angular, pero parece que esta construcción: [{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]puede simplificarse así ['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]. Lo acabo de probar en Angular 1.5.9 y funciona :) ¡Gracias por una excelente respuesta!
vadipp
30

Usando un $scopemétodo en el controlador, puede calcular qué clases generar en la vista. Esto es especialmente útil si tiene una lógica compleja para calcular los nombres de clase y reducirá la cantidad de lógica en su vista moviéndola al controlador:

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

    $scope.className = function() {

        var className = 'initClass';

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

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

        return className;
    };
});

y en la vista, simplemente:

<div ng-class="className()"></div>
Ahmad M
fuente
1
Si la clase cambia después del renderizado, ¿ng-class sigue escuchando los cambios className?
remarsh
3
En mi humilde opinión, el alcance solo debe exponer la condición . Debería depender de los ng-enlaces HTML para determinar qué clase usar cuando se cumpla esa condición.
Alnitak
1
Esto sobrescribe el atributo de clase en elementos dom. Si se usa esto, tienen que incluir las clases que no necesitan condiciones en la devolución className.
phuwin el
21

Su ejemplo funciona para clases condicionadas (el nombre de la clase mostrará si expressionDataXes verdadero):

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

También puede agregar varias clases, proporcionadas por el usuario del elemento:

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

Uso:

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

seldary
fuente
3
¿Sabe si es posible combinar los dos tipos de plantilla, es decir, usar {}una clase condicional y una clase vinculada a datos []?
jwg
3
Por lo que sé, no es posible. Además, no es posible poner dos ngClassdirectivas en un elemento.
2014
¡Gracias! Esto parece confirmarse en otra parte.
jwg
2
se sorprenderá: <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>y más: scotch.io/tutorials/javascript/the-many-ways-to-use-ngclass
mayankcpdixit
1
@jwg: puede combinar dos tipos de plantillas y está aquí: stackoverflow.com/questions/29230732/…
satish kumar V
12

Aquí hay un ejemplo que compara múltiples estados de enrutador angular-ui usando OR || operador:

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

Le dará al li las clases de advertencia y / o activo, dependiendo de si se cumplen las condiciones.

nitech
fuente
Realmente no puedo recordar. ¿No es lógico sin embargo?
nitech
Gracias por aclarar que se pueden aplicar varias clases desde el mismo bloque de clase ng, siempre que se cumplan cada una de sus condiciones.
cedricdlb
6

Debajo de active y activemenu hay clases y itemCount y ShowCart es expresión / valores booleanos.

ng-class="{'active' : itemCount, 'activemenu' : showCart}"
Vivek Panday
fuente
5

Con múltiples condiciones

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

Encontró otra forma gracias a Scotch.io

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

Esta fue mi referencia. CAMINO

Emiliano Barboza
fuente
3

De otra manera, podemos crear una función para controlar "usar múltiples clases"

CSS

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

Guión

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

Usándolo

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

Puede consultar la página de códigos completa en ng-class si es un ejemplo

Lewis Hai
fuente