Existe alguma forma de fazer uma expressão para algo como classe 'ing' ser um condicional?
Por exemplo, eu tentei o seguinte:
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
A questão com este código é que não importa o que seja 'obj.value1', o teste de classe é sempre aplicado ao elemento. Fazendo isso:
<span ng-class="{test: obj.value2}">test</span>
Desde que 'obj.value2' não seja igual a um valor verdadeiro, a classe em não aplicada. Agora eu posso contornar o problema no primeiro exemplo fazendo isso:
<span ng-class="{test: checkValue1()}">test</span>
Onde a função checkValue1
se parece com isto:
$scope.checkValue1 = function() {
return $scope.obj.value === 'somevalue';
}
Eu só estou me perguntando se é assim que a "classe-inglesa" deve funcionar. Também estou construindo uma diretiva personalizada onde eu gostaria de fazer algo semelhante a isto. Entretanto, eu posso'não encontrar uma maneira de ver uma expressão (e talvez isso seja impossível e a razão pela qual ela funciona assim).
Aqui está um plnkr para mostrar o que eu quero dizer.
A sua primeira tentativa foi quase certa, deve funcionar sem as aspas.
{test: obj.value1 == 'someothervalue'}
Aqui está um plnkr.
A diretiva ngClass funcionará com qualquer expressão que avalie veracidade ou falsidade, um pouco semelhante às expressões Javascript, mas com algumas diferenças, você pode ler sobre aqui. Se o seu condicional é muito complexo, então você pode usar uma função que retorna verdades ou falsidades, como você fez na sua terceira tentativa.
Só para complementar: Você também pode usar operadores lógicos para formar expressões lógicas como
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Usando ng-classe dentro 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 status na tarefa.status é usada uma classe diferente para a linha.
A sintaxe angular é usar o operador : para executar o equivalente a um modificador **if***.
<div ng-class="{ 'clearfix' : (row % 2) == 0 }">
Adicione a classe clearfix às filas pares. No entanto, a expressão pode ser qualquer coisa que possamos ter em condições normais e deve ser avaliada como verdadeira ou falsa.