angularjs - ngClass 样式，键中带有破折号

Question

我希望这可以让使用破折号的样式让人头疼，特别是因为 bootstrap 已经变得如此流行。

我正在使用 Angular 1.0.5

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

在 ngClass documentation ，这个例子很简单，但它也提到表达式可以是类名到 bool 值的映射。我试图在我的图标上使用“图标白色”样式，如bootstrap documentation所示，取决于 bool 变量。

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

上面的行不起作用。当 someBooleanValue 为 true 时，该类不会附加 icon-white。但是，如果我将键更改为 iconWhite，它就会成功添加到类值列表中。如何用破折号添加一个值？

Answer 1

经过几个小时的修改，结果发现破折号被插值了!需要报价。

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

更新:

在旧版本的 Angular 中，使用反斜杠也能达到目的，但在新版本中则不然。

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

前者可能是首选，因为您可以更轻松地在您喜欢的编辑器中搜索它。