Stile ngClass con trattino in chiave

Spero che questo risparmi a qualcuno mal di testa con stili che usano trattini, soprattutto da quando bootstrap è diventato così popolare.

Sto usando angolare 1.0.5 per mezzo di

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

Nella documentazione di ngClass , l'esempio è semplice, ma menziona anche che l'espressione può essere una mappa di nomi di classe con valori booleani. Stavo cercando di usare lo stile "icona-bianco" sulla mia icona, come mostrato nella documentazione bootstrap , a seconda di una variabile booleana.

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

La riga sopra non funziona. La classe non viene aggiunta icon-whitequando someBooleanValueè vera. Tuttavia, se cambio la chiave in iconWhite, viene aggiunta correttamente all'elenco dei valori di classe. Come si aggiungerebbe un valore con un trattino?

Dopo ore di hacking in giro, si scopre che il trattino viene interpolato! Citazioni sono necessarie.

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

Spero che questo aiuti qualcuno a strapparsi i capelli.

AGGIORNARE:

Nelle versioni precedenti di Angular, anche l'uso di una barra rovesciata fa il trucco, ma non nelle versioni più recenti.

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

Il primo è probabilmente preferito, poiché puoi cercarlo più facilmente nel tuo editor preferito.

\'icon-white\' funziona anche (con AngularJS 1.2.7)

alternativa per usi di 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>