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.

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

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.

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

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

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

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

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.

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 ";
  }     
}

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>

Para Angular 2, use este

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

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>