¿Hay alguna forma de hacer que una expresión como ng-class
sea una condicional?
Por ejemplo, he probado lo siguiente:
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
El problema con este código es que no importa cuál sea obj.value1
, la prueba de clase siempre se aplica al elemento. Haciendo esto:
<span ng-class="{test: obj.value2}">test</span>
Mientras obj.value2
no sea igual a un valor verdadero, la clase no se aplica. Ahora puedo solucionar el problema del primer ejemplo haciendo esto:
<span ng-class="{test: checkValue1()}">test</span>
Donde la función checkValue1
tiene este aspecto:
$scope.checkValue1 = function() {
return $scope.obj.value === 'somevalue';
}
Me pregunto si es así como se supone que funciona ng-class
. También estoy construyendo una directiva personalizada donde me gustaría hacer algo similar a esto. Sin embargo, no puedo' encontrar una manera de ver una expresión (y tal vez eso es imposible y la razón por la que funciona así).
Aquí hay un plnkr para mostrar lo que quiero decir.
Tu primer intento era casi correcto, debería funcionar sin las comillas.
{test: obj.value1 == 'someothervalue'}
Aquí hay un plnkr.
La directiva ngClass funcionará con cualquier expresión que evalúe truthy o falsey, un poco similar a las expresiones de Javascript pero con algunas diferencias, puedes leer sobre aquí. Si tu condicional es demasiado complejo, entonces puedes usar una función que devuelva truthy o falsey, como hiciste en tu tercer intento.
Sólo para complementar: También puedes usar operadores lógicos para formar expresiones lógicas como
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Uso de ng-class dentro de ng-repeat
<table>
<tbody>
<tr ng-repeat="task in todos"
ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
<td>{{$index + 1}}</td>
<td>{{task.name}}</td>
<td>{{task.date|date:'yyyy-MM-dd'}}</td>
<td>{{task.status}}</td>
</tr>
</tbody>
</table>
Para cada estado en task.status se utiliza una clase diferente para la fila.
La sintaxis de Angular consiste en utilizar el operador : para realizar el equivalente a un modificador if.
<div ng-class="{ 'clearfix' : (row % 2) == 0 }">
Añadir la clase clearfix a las filas pares. No obstante, la expresión puede ser cualquier cosa que podamos tener en una condición if normal y debe evaluarse como verdadero o falso.