ngClass风格，在关键的冲刺 [英] ngClass style with dash in key

问题描述

我希望这可以节省有人使用破折号风格头疼，特别是引导已经变得如此受欢迎。

I hope this saves someone a headache with styles that use dashes, especially since bootstrap has become so popular.

我使用的角度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文档，这个例子很简单，但它也提到了前pression可以映射一个类名布尔值。我试图用图标白的风格对我的图标，如图所示引导文件，取决于布尔变量。

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 是真实的。但是，如果我改变的关键， 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.

更新：

在老版本的角度，用一个反斜杠也做的伎俩，但不是在新版本。

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}">

前者大概是preferred，因为你可以更轻松地在编辑器中进行搜索。

The former is probably preferred, since you can more easily search for it in your favorite editor.

这篇关于ngClass风格，在关键的冲刺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！