AngularJS与Bootstrap一起使用时，ng-class无法正常工作

Question

这段代码

    <div ng-class="{alert: true, alert-success: geocode.success, alert-danger: !geocode.success}">{{geocode.status}}</div>

发生错误了

Syntax Error: Token '-' is at column {2} of the expression [{3}] starting at [{4}].

但是如果我更新代码为：

    <div ng-class="{alert: true, green: geocode.success, red: !geocode.success}">{{geocode.status}}</div>

它起作用了。

ng-class不喜欢带有-的CSS名称，例如alert-danger alert-success吗？

谢谢。

- icn

---

在我看来，修改您的帖子标题并添加真正的问题，例如ng-class与引导虚线类无法正常工作等，可能会更好。 - Whisher

Answer 1

如果类名包含破折号，您必须引用该类名：

<div ng-class="{'alert': true, 'alert-success': geocode.success, 'alert-danger': !geocode.success}">{{geocode.status}}</div>

这是因为 ng-class 接受 JavaScript 对象作为其值，而该对象的键（或任何 JavaScript 标识符）不能包含破折号。

- Bohuslav Burghardt