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>

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.

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>