He encontrado problemas al aplicar clases dentro de elementos de tabla cuando ya tenía una clase aplicada a toda la tabla (por ejemplo, un color aplicado a las filas impares <myClass tbody tr:nth-child(even) td>
). Parece que cuando inspecciona el elemento con Developer Tools , element.style
no tiene estilo asignado. Entonces, en lugar de usar ng-class
, he intentado usar ng-style
, y en este caso, el nuevo atributo CSS aparece dentro element.style
. Este código funciona muy bien para mí:
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="myvar === 0 && {'background-color': 'red'} ||
myvar === 1 && {'background-color': 'green'} ||
myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>
[...more amazing code...]
</tr>
Myvar es lo que estoy evaluando, y en cada caso aplico un estilo a cada uno <td>
según el valor de myvar , que sobrescribe el estilo actual aplicado por la clase CSS para toda la tabla.
ACTUALIZAR
Si desea aplicar una clase a la tabla, por ejemplo, al visitar una página o en otros casos, puede usar esta estructura:
<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">
Básicamente, lo que necesitamos para activar una clase ng es la clase a aplicar y una declaración verdadera o falsa. Verdadero aplica la clase y falso no. Así que aquí tenemos dos verificaciones de la ruta de la página y un OR entre ellas, por lo que si estamos en /route_a
OR estamos en route_b
, se aplicará la clase activa .
Esto funciona simplemente teniendo una función lógica a la derecha que devuelve verdadero o falso.
Entonces, en el primer ejemplo, ng-style está condicionado por tres declaraciones. Si todos son falsos, no se aplica ningún estilo, pero siguiendo nuestra lógica, se aplicará al menos uno, por lo tanto, la expresión lógica verificará qué comparación de variables es verdadera y porque una matriz no vacía siempre es verdadera, eso será dejó una matriz como retorno y con solo un verdadero, considerando que estamos usando OR para toda la respuesta, se aplicará el estilo restante.
Por cierto, olvidé darle la función isActive ():
$rootScope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
NUEVA ACTUALIZACIÓN
Aquí tienes algo que encuentro realmente útil. Cuando necesite aplicar una clase según el valor de una variable, por ejemplo, un icono según el contenido de la misma div
, puede usar el siguiente código (muy útil en ng-repeat
):
<i class="fa" ng-class="{ 'fa-github' : type === 0,
'fa-linkedin' : type === 1,
'fa-skype' : type === 2,
'fa-google' : type === 3 }"></i>
Iconos de Font Awesome