Condicional AngularJS ngClass
Existe alguma maneira de fazer uma expressão para algo como ngClass ser condicional. Por exemplo, eu tentei o seguinte:
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
o problema com este código é que não importa o que obj.o valor 1 é, o teste de classe é sempre aplicado ao elemento. A fazer isto:
<span ng-class="{test: obj.value2}">test</span>
desde que seja obj.valor 2 não é igual a um valor truthy, a classe em não aplicado. Agora eu posso trabalhar em torno da questão no primeiro exemplo fazendo isso:
<span ng-class="{test: checkValue1()}">test</span>
em que a função checkValue1 parece isto:
$scope.checkValue1 = function() {
return $scope.obj.value === 'somevalue';
}
Só estou a pensar se é assim que o ngClass deve funcionar. Estou também a elaborar uma directiva específica em que gostaria de fazer algo semelhante a esta. No entanto, não consigo 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 quero dizer.
10 answers
{test: obj.value1 == 'someothervalue'}
Aqui está um plnkr .
A Directiva ngClass irá funcionar com qualquer expressão que avalie truthy ou falsey, um pouco semelhante às expressões Javascript mas com algumas diferenças, você pode ler sobre Aqui. Se seu condicional é muito complexo, então você pode usar uma função que retorna truthy ou falsey, como você fez em sua terceira tentativa.
Só para complementar: você pode use também operadores lógicos para formar expressões lógicas como
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Usando a classe ng dentro da 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 da tarefa.status Uma classe diferente é usada para a linha.
Angular JS fornece esta funcionalidade em directiva relativa à classe GN. Em que você pode colocar condição e também atribuir classe condicional. Você pode conseguir isso de duas maneiras diferentes.
Tipo 1
<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>
Nesta classe de código aplicar-se-á de acordo com o valor de estado Valor
Se o valor de for 0 em seguida, aplicar a classe one
Se o valor de for 1 em seguida, aplicar a classe Dois
Se o valor de for 2 em seguida, aplicar a classe Três
Tipo 2
<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>
Em que Classe será aplicada pelo valor de
Se o valor do Estado for 1 ou verdadeiro então irá adicionar classe test_yes
Se o valor do Estado for 0 ou false então irá adicionar a classe test_ no
Vejo grandes exemplos acima, mas todos começam com colchetes (mapa json). Outra opção é retornar um resultado baseado em computação. O resultado também pode ser uma lista de nomes de classe css (não apenas mapa). Exemplo:
ng-class="(status=='active') ? 'enabled' : 'disabled'"
Ou
ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"
Explicação: Se o estado estiver activo, será utilizada a classe enabled
. Caso contrário, será utilizada a classe disabled
.
A lista []
é usada para usar várias classes (não apenas uma).
Existe um método simples que pode usar com o atributo de classe html e abreviatura if/else. Não é preciso torná-lo tão complexo. Basta usar o seguinte método.
<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>
Codificação Feliz,
Nimantha Perera
Passo-1
Usando o operador ternário
<div ng-class="condition?'class1':'class2'"></div>
Saída
Se a sua condição for verdadeira então a classe 1 será aplicada ao seu elemento caso contrário a classe 2 será aplicada.
Desvantagem
Quando você vai tentar mudar o valor condicional no tempo de execução a classe de alguma forma não vai mudar. Então eu vou sugerir que você vá para o step2 se você tem requisitos como classe dinâmica alterar.
Passo-2
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
Saída
Se a sua condição corresponder ao value 1 então a classe 1 será aplicada ao seu elemento, se corresponder ao value 2 então a classe 2 será aplicada e assim por diante. E a mudança de classe dinâmica funcionará bem com ela.
Espero que isto te ajude.A sintaxe Angular é usar a : operador para executar o equivalente a umSe modificador
<div ng-class="{ 'clearfix' : (row % 2) == 0 }">
Adicionar a classe clearfix às linhas pares. No entanto, a expressão pode ser qualquer coisa que possamos ter em condições normais se a condição e deve avaliar para Verdadeiro ou falso.
Usar a função com a classe ng é uma boa opção quando alguém tem de executar uma lógica complexa para decidir a classe CSS apropriada.
Http://jsfiddle.net/ms403Ly8/2/
HTML:
<div ng-app>
<div ng-controller="testCtrl">
<div ng-class="getCSSClass()">Testing ng-class using function</div>
</div>
</div>
CSS:
.testclass { Background: lightBlue}
JavaScript:
function testCtrl($scope) {
$scope.getCSSClass = function() {
return "testclass ";
}
}
Utilize este
<div ng-class="{states}[condition]"></div>
Por exemplo, se a condição é [2 = = 2], os estados são {true:'...', falso: '...'}
<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>
Para o Angular 2, use este
<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>