AngularJS ngClass condicional


499

Existe alguma maneira de fazer uma expressão para algo como ng-classser condicional?

Por exemplo, eu tentei o seguinte:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

O problema desse código é que, não importa o que obj.value1seja, o teste de classe é sempre aplicado ao elemento. Fazendo isso:

<span ng-class="{test: obj.value2}">test</span>

Desde que obj.value2não seja igual a um valor verdadeiro, a classe não será aplicada. Agora, posso solucionar o problema no primeiro exemplo, fazendo o seguinte:

<span ng-class="{test: checkValue1()}">test</span>

Onde a checkValue1função se parece com isso:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

Só estou me perguntando se é assim que ng-classdeve funcionar. Também estou criando uma diretiva personalizada na qual gostaria de fazer algo semelhante a isso. No entanto, não consigo encontrar uma maneira de assistir a uma expressão (e talvez isso seja impossível e a razão pela qual funciona dessa maneira).

Aqui está um exemplo para mostrar o que quero dizer.


Dê uma olhada nesta resposta: stackoverflow.com/questions/14788652/…
Adrian Neatu

43
As classes com traços precisam ser citadas:ng-class="'label-success': obj.value1 == 'Ready', 'label-warning': obj.value1 == 'On hold'}"
Brent Washburne

2
Podemos usar mais condições com a classe ng, veja neste blog goo.gl/qfEQZw
virender


"Classes com traços precisam de cílios '' '' '' '"
richard

Respostas:


596

Sua primeira tentativa foi quase correta, deve funcionar sem as aspas.

{test: obj.value1 == 'someothervalue'}

Aqui está um plnkr .

A diretiva ngClass funcionará com qualquer expressão que avalie verdade ou falsidade, um pouco semelhante às expressões Javascript, mas com algumas diferenças, você pode ler aqui . Se sua condicional for muito complexa, você poderá usar uma função que retorne verdade ou falsey, como fez na terceira tentativa.

Apenas 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'}"

2
Obrigado, por qualquer motivo, pensei que, por ser uma expressão como o valor do objeto, a coisa toda tivesse que estar entre aspas.
Ryanzec

8
envolva o nome da classe 'caso contrário, se você quiser adicionar mais classes ou se sua classe tiver hífens ou sublinhados, ela não funcionará. ng-class="{'test test-2: obj.value1 === 'value'}"
Andrea Turri

6
@Andrea, você esqueceu a cotação de fechamento: ng-class="{'test test-2': obj.value1 === 'value'}"
ErikE

Para Angular2 (o que eu estava tentando encontrar) atributo de uso (s) como: [class.test]="obj.value1 == 'someotervalue'".
kub1x

FYI para os leitores, você também pode ter colchetes. ng-class="{danger:!enabled || (type === 'WHEEL' && !isOnline) }
daCoda 11/11/19

227

Usando a classe ng 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 status no task.status, uma classe diferente é usada para a linha.


Exemplo perfeito com várias classes, obrigado!
Sreekanth Karini

112

JS angular fornece essa funcionalidade na diretiva de classe ng . 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>

Neste código da classe serão aplicadas de acordo com o valor de status de valor

se o valor do status for 0 , aplique a classe um

se o valor do status for 1 , aplique a classe dois

se o valor do status for 2 , aplique a classe três


Tipo 2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

Em qual classe será aplicada pelo valor do status

se o valor do status for 1 ou verdadeiro , ele adicionará a classe test_yes

se o valor do status for 0 ou false , ele adicionará a classe test_no


1
qual é o status aqui?
CommonSenseCode

Status é o valor que você deseja verificar ou validar de acordo com a classe que será aplicada.
precisa saber é o seguinte

4
Como desta forma, pois é mais flexível e menos insano quando se lida com vários valores
Eduardo La Hoz Miranda

Que tal usá-lo para várias classes. Como, <div ng-class = "{0: 'um', 1: 'dois', 2: 'três'} [status], {0: 'um', 1: 'dois'} [status1]"> </div>
parth.hirpara

1
podemos usar isso em tal caso, como: <div ng-class="{'Image' || 'image': 'image-icon', 'Video' || 'video' || 'aVideo' || 'bVideo' : 'video-icon'}[resource.type]"></div>
Chandra Kant Paliwal

80

Vejo ótimos exemplos acima, mas todos começam com colchetes (json map). Outra opção é retornar um resultado com base na computação. O resultado também pode ser uma lista de nomes de classes css (não apenas mapa). Exemplo:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

ou

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

Explicação: Se o status estiver ativo, a classe enabledserá usada. Caso contrário, a classe disabledserá usada.

A lista []é usada para usar várias classes (não apenas uma).


1
Adorável, todos os exemplos incríveis, mas eu gosto mais do seu!
stormec56

48

Existe um método simples que você pode usar com o atributo de classe html e a abreviação if / else. Não há necessidade de 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>

Feliz codificação, Nimantha Perera


2
Esse cara entende. Obrigado bud
deepakgates 25/16

36

Vou mostrar dois métodos pelos quais você pode aplicar dinamicamente a classe ng

Passo 1

Usando o operador ternário

<div ng-class="condition?'class1':'class2'"></div>

Resultado

Se sua condição for verdadeira, a classe1 será aplicada ao seu elemento, caso contrário a classe2 será aplicada.

Desvantagem

Quando você tenta alterar o valor condicional no tempo de execução, a classe não muda de alguma forma. Então, vou sugerir que você vá para a etapa 2 se tiver requisitos como alteração dinâmica de classe.

Passo 2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

Resultado

se sua condição corresponder ao valor1, a classe1 será aplicada ao seu elemento, se corresponder ao valor2, a classe2 será aplicada e assim por diante. E a mudança dinâmica de classe funcionará bem com isso.

Espero que isso ajude você.


36

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


1
Agradável! Além disso, dentro do ng-repeat, você pode usar $ even para definir a classe. Por exemplo, ng-class = "$ even? 'Even': 'odd'". Outros bools bacana dentro do ng-repeat é de US $ primeiro, $ passado, $, mesmo, $ estranho ...
Max

15

Usar a função com ng-class é uma boa opção quando alguém precisa 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 ";
  }     
}

2
Eu acho que isso confunde as preocupações. Um controlador deve ser mais abstrato e não se importar com as classes css, mas sim com o estado. Com base no estado, as classes css devem ser aplicadas no modelo. Dessa forma, o controlador é independente do modelo e é mais fácil reutilizável.
Hubert Grzeskowiak

9

usa isto

<div ng-class="{states}[condition]"></div>

por exemplo, se a condição for [2 == 2], os estados serão {true: '...', false: '...'}

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

mas se eu tiver 3 ou mais condições, isso não funcionaria? uma vez que este só retornará verdadeiros e falsos conditons
Ali Al Amine

condições significa verdadeiro ou falso. Você quer dizer algo com mais de 2 valores ?? @AlyAlAmeen
Saeed

7

Para Angular 2, use este

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

Para expandir este, por Angular 2 você aplicar uma classe e também um modificador de classe em um if / else condicional usando uma matriz assim:[ngClass]="['base-class', thread.isActive ? 'base-class--active' : '']"
Matt Rabe

5

ng-classé uma diretiva dos AngularJs principais. No qual você pode usar "Sintaxe de seqüência de caracteres", "Sintaxe de matriz", "Expressão avaliada", "Operador ternário" e muitas outras opções descritas abaixo:

ngClass usando sintaxe de string

Esta é a maneira mais simples de usar o ngClass. Você pode apenas adicionar uma variável Angular à ng-class e essa é a classe que será usada para esse elemento.

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

Exemplo de demonstração de ngClass usando sintaxe de string

ngClass usando sintaxe de matriz

Isso é semelhante ao método de sintaxe de cadeia, exceto que você pode aplicar várias classes.

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass usando expressão avaliada

Um método mais avançado de usar o ngClass (e o que você provavelmente mais usará) é avaliar uma expressão. A maneira como isso funciona é que, se uma variável ou expressão for avaliada true, você poderá aplicar uma determinada classe. Caso contrário, a classe não será aplicada.

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

Exemplo de ngClass usando expressão avaliada

ngClass usando valor

Isso é semelhante ao método de expressão avaliado, exceto que você apenas pode comparar vários valores com a única variável.

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

ngClass usando o operador ternário

O operador ternário nos permite usar taquigrafia para especificar duas classes diferentes, uma se uma expressão for verdadeira e outra para falsa. Aqui está a sintaxe básica para o operador ternário:

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

Avaliando primeiro, último ou número específico

Se você estiver usando a ngRepeatdiretiva e você deseja aplicar classes para o first, lastou um número específico na lista, você pode usar propriedades especiais ngRepeat. Estes incluem $first, $last, $even, $odd, e alguns outros. Aqui está um exemplo de como usá-los.

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.