Estilo ngClass com traço na chave

165

Espero que isso poupe a alguém uma dor de cabeça com estilos que usam traços, especialmente desde que o bootstrap se tornou tão popular.

Estou usando o angular 1.0.5 por meio de

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>

Na documentação do ngClass , o exemplo é simples, mas também menciona que a expressão pode ser um mapa de nomes de classes para valores booleanos. Eu estava tentando usar o estilo "icon-white" no meu ícone, como mostrado na documentação do bootstrap , dependendo de uma variável booleana.

<i class="icon-home" ng-class="{icon-white: someBooleanValue}">

A linha acima não funciona. A classe não é anexada com icon-whitequando someBooleanValueé verdadeira. No entanto, se eu alterar a chave para iconWhite, ela será adicionada com êxito à lista de valores de classe. Como alguém adicionaria um valor com um traço?

Idiota
fonte
1
Olá, bem-vindo ao SO! Você deve atualizar sua pergunta para dividi-la em uma pergunta e uma resposta - responder a sua própria pergunta é OK e incentivado se for útil. Dessa forma, você pode aceitar sua resposta e outras pessoas pesquisando podem ver que a pergunta tem uma resposta bem-sucedida.
Alex Osborn
Obrigado por sua sugestão!
Foo L

Respostas:

364

Após horas de hackers, o traço fica interpolado! Citações são necessárias.

<i class="icon-home" ng-class="{'icon-white': someBooleanValue}">

Espero que isso ajude alguém a arrancar os cabelos.

ATUALIZAR:

Nas versões mais antigas do Angular, o uso de uma barra invertida também funciona, mas não nas versões mais recentes.

<i class="icon-home" ng-class="{icon\-white: someBooleanValue}">

O primeiro é provavelmente o preferido, pois você pode pesquisá-lo com mais facilidade no seu editor favorito.

Idiota
fonte
15
Obrigado por isso. Também perdi muito tempo com este.
taudep
2
Obrigado!!! Eu sabia que isso estava acontecendo, mas não tinha certeza de como resolver. OBRIGADO!
Mark Ford
1
Eu uso o AngularJS 1.2.3. O "\ -" não funciona para mim. "''" funcionou muito bem.
bobzsj87
1
Estava me perguntando por que isso não estava funcionando para mim quando eu parecia estar seguindo outros exemplos!
Nevster
$ scope.someBooleanValue = true
zloctb
11

\'icon-white\' também funciona (com AngularJS 1.2.7)

Bromoxid
fonte
Esta é a melhor resposta, pois é a mais amigável para o futuro e para trás compatível
Eric Steinborn
2
Oi! @EricSteinborn Eu sou do futuro, vim aqui para avisá-lo: isso não é nada amigável!
4117 Typo
0

alternativa para usos da classe ng:

    .menu-disabled-true{
color: red;
}
    .menu-disabled-false{
color: green;
}


<div ng-controller="DeathrayMenuController">
<p class=menu-disabled-{{status}}>shanam</p>
 <button ng-click="action()">click me</button>
</div>

<script>



function DeathrayMenuController($scope) {
    $scope.status=true
    $scope.action= function(){
      $scope.status=!$scope.status
    }
}
</script>
zloctb
fonte