CODEWITHSUNDEEP
cssangularjstwitter-bootstrap
icn
icn

Reputation: 17876

angularjs ng-class not working properly with bootstrap

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

Upvotes: 4

Views: 2371

Answers (1)

Bohuslav Burghardt
Bohuslav Burghardt

Reputation: 34776

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.

Upvotes: 9

Related Questions