键中带破折号的 ngClass 样式 [英] ngClass style with dash in key
问题描述
我希望这能让人们避免使用破折号的样式,尤其是在 bootstrap 变得如此流行的情况下.
I hope this saves someone a headache with styles that use dashes, especially since bootstrap has become so popular.
我正在使用 angular 1.0.5
I am using angular 1.0.5 by way of
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
在ngClass 文档中,示例很简单,但也提到表达式可以是类名到布尔值的映射.我试图在我的图标上使用icon-white"样式,如 bootstrap 文档,取决于一个布尔变量.
In the ngClass documentation, the example is simple, but it also mentions the expression can be a map of class names to boolean values. I was trying to use the "icon-white" style on my icon as shown in the bootstrap documentation, depending on a boolean variable.
<i class="icon-home" ng-class="{icon-white: someBooleanValue}">
上面的行不起作用.当 someBooleanValue
为 true 时,该类不会附加 icon-white
.但是,如果我将键更改为 iconWhite
,它会成功添加到类值列表中.如何用破折号添加值?
The line above does not work. The class is not appended with icon-white
when someBooleanValue
is true. However, if I change the key to iconWhite
, it is successfully added to the list of class values. How would one add a value with a dash?
推荐答案
经过数小时的黑客攻击,结果是破折号被插入了!需要引用.
After hours of hacking around, it turns out the dash gets interpolated! Quotes are needed.
<i class="icon-home" ng-class="{'icon-white': someBooleanValue}">
我希望这能帮助人们避免脱发.
I hope this helps someone from tearing their hair out.
更新:
在旧版本的 Angular 中,使用反斜杠也可以解决问题,但在新版本中不行.
In older versions of Angular, using a backslash also does the trick, but not in the newer versions.
<i class="icon-home" ng-class="{icon\-white: someBooleanValue}">
前者可能更受欢迎,因为您可以更轻松地在您喜欢的编辑器中搜索它.
The former is probably preferred, since you can more easily search for it in your favorite editor.
这篇关于键中带破折号的 ngClass 样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!