angularjs ng-class not working properly with bootstrap

Question

This piece of code

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

got error

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

But if I update the code to

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

it works.

ng-class doesn't like css name with - like alert-danger alert-success?

THanks

Answer 1

You must quote the class name if it contains dashes:

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

This is because ng-class takes JavaScript object as its value and the object's keys (or any JavaScript identifiers for that matter) must not contain dashes.