Style ngClass avec tiret dans la clé

J'espère que cela épargnera à quelqu'un un mal de tête avec des styles qui utilisent des tirets, d'autant plus que le bootstrap est devenu si populaire.

J'utilise angular 1.0.5 au moyen de

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

Dans la documentation ngClass , l'exemple est simple, mais il mentionne également que l'expression peut être une mappe de noms de classe en valeurs booléennes. J'essayais d'utiliser le style "icon-white" sur mon icône comme indiqué dans la documentation de bootstrap , en fonction d'une variable booléenne.

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

La ligne ci-dessus ne fonctionne pas. La classe n'est pas ajoutée avec icon-whitewhen someBooleanValueis true. Cependant, si je change la clé en iconWhite, elle est ajoutée avec succès à la liste des valeurs de classe. Comment ajouterait-on une valeur avec un tiret?

Après des heures de piratage, il s'avère que le tableau de bord est interpolé! Des citations sont nécessaires.

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

J'espère que cela aidera quelqu'un à se déchirer les cheveux.

METTRE À JOUR:

Dans les anciennes versions d'Angular, l'utilisation d'une barre oblique inverse fait également l'affaire, mais pas dans les versions plus récentes.

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

Le premier est probablement préféré, car vous pouvez le rechercher plus facilement dans votre éditeur préféré.

\'icon-white\' fonctionne également (avec AngularJS 1.2.7)

alternative pour les utilisations ng-class:

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