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

imo may would be good changing your post title adding the really issue like ng-class not working properly with bootstrap dashed class or similar — Whisher
– Whisher, Commented Nov 5, 2014 at 20:10

Bohuslav Burghardt · Accepted Answer · 2014-11-05 20:08:23Z

9

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.

edited Nov 5, 2014 at 20:08

answered Nov 5, 2014 at 20:02

Bohuslav Burghardt

35.1k7 gold badges130 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs ng-class not working properly with bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related