angularjs ng-class与bootstrap无法正常工作

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不喜欢- alert-danger之类的alert-success的css名称？

谢谢

Answer 1

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

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

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