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>

有用.

纳克级不喜欢用CSS的名字-一样alert-danger alert-success？

谢谢

Answer 1

如果类名包含破折号,则必须引用类名:

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

这是因为ng-class将JavaScript对象作为其值,并且对象的键(或任何JavaScript标识符)不得包含破折号.