ngClass-Stil mit Bindestrich in der Taste

Ich hoffe, dies erspart jemandem Kopfschmerzen mit Stilen, die Bindestriche verwenden, zumal Bootstrap so populär geworden ist.

Ich benutze Winkel 1.0.5 über

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

In der ngClass-Dokumentation ist das Beispiel einfach, es wird jedoch auch erwähnt, dass der Ausdruck eine Zuordnung von Klassennamen zu booleschen Werten sein kann. Ich habe versucht, den "icon-white" -Stil für mein Symbol zu verwenden, wie in der Bootstrap-Dokumentation gezeigt , abhängig von einer booleschen Variablen.

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

Die obige Zeile funktioniert nicht. Die Klasse wird nicht angehängt, icon-whitewenn someBooleanValuewahr ist. Wenn ich den Schlüssel jedoch in ändere iconWhite, wird er erfolgreich zur Liste der Klassenwerte hinzugefügt. Wie würde man einen Wert mit einem Bindestrich hinzufügen?

Nach stundenlangem Herumhacken stellt sich heraus, dass der Bindestrich interpoliert wird! Zitate werden benötigt.

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

Ich hoffe, das hilft jemandem, sich die Haare auszureißen.

AKTUALISIEREN:

In älteren Versionen von Angular reicht die Verwendung eines Backslash ebenfalls aus, in den neueren Versionen jedoch nicht.

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

Ersteres wird wahrscheinlich bevorzugt, da Sie in Ihrem Lieblingseditor leichter danach suchen können.

\'icon-white\' funktioniert auch (mit AngularJS 1.2.7)

Alternative für die Verwendung der Klasse 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>