Mantenha as classes CSS fora de seus controladores Angular

No Angular (e em geral), sou um grande fã de manter a lógica de visualização fora dos meus controladores, e um lugar onde vejo que isso não está acontecendo são as classes CSS e o uso da classe ng.

Se você não estiver familiarizado com ng-class, é uma diretiva especial para permitir vinculação de expressões e colocá-las como, sim, a classe de um elemento. Um uso muito comum da classe ng é mais ou menos assim:

<p ng-class="{{active}}">Class applied!</p>
<script>
    function MySimpleCtrl() {
        $scope.active = 'active';
        ...

Portanto, no controlador, estamos definindo a classe particular que deve ser exibida; então digamos que temos uma classe ‘inativa’ – simplesmente definimos a variável $ scope.active como ‘inactive’ e voila, a classe é definida na visualização.

Mas ng-class é ainda mais inteligente do que isso:

ng-class aceita três tipos diferentes de valor:

1. Um valor de string (nome da classe)
2. Uma matriz de strings (classes a serem aplicadas)
3. Um objeto + expressão para avaliar

E é a opção 3 que interessa; a sintaxe é mais ou menos assim:

ng-class="{object of key/value pairs}[expression to evaluate]"

Basicamente, ng-class avalia a expressão (entre colchetes) e a usa como chave para o objeto; o valor ao qual a chave está relacionada é a classe que se aplica.

Isso nos permite transformar o valor em um booleano real (que é realmente como o estamos usando) – sem lógica de visão nos controladores, os controladores são mais fáceis de testar e podem ser reutilizados.$scope.active

Aqui está um exemplo simples:

<p ng-class="{true: 'active', false: 'inactive'}[isActive]">
    Class applied
!</p>
<script>
    function MySimpleCtrl() {
        $scope.isActive = true;

E você pode ver isso funcionando neste JSFiddle

Se estiver usando algum tipo de conjunto de expressões condicionais (ou seja, alterna), você pode usar outra sintaxe muito semelhante, como esta:

ng-class="{'selected': isSelected, 'blue': isBlue}"

Aqui a selectedclasse será aplicada se isSelectedfor verdadeira. O mesmo acontece com a blueclasse. O Angular aplicará tantos daqueles que forem verdadeiros, então você pode definir a classe como selecionada e azul.