In my Web App, I'm using ng-class="{highlighted_category: selected === category}" to highlight an entry when it is selected. Problems occur when I want to use e.g. pure-menu-selected because it contains dashes which Angular does not allow for some reason.

Error: [$parse:syntax] Syntax Error: Token '-' is unexpected, expecting [:] at column 6 of the expression [{pure-menu-selected: selected === category}] starting at [-menu-selected: selected === category}].

What would be an elegant way to solve this? Why does Angular not allow dashes in ngClass?

In my Web App, I'm using ng-class="{highlighted_category: selected === category}" to highlight an entry when it is selected. Problems occur when I want to use e.g. pure-menu-selected because it contains dashes which Angular does not allow for some reason.

Error: [$parse:syntax] Syntax Error: Token '-' is unexpected, expecting [:] at column 6 of the expression [{pure-menu-selected: selected === category}] starting at [-menu-selected: selected === category}].

What would be an elegant way to solve this? Why does Angular not allow dashes in ngClass?

• javascript
• css
• angularjs

Share Improve this question Follow asked Aug 13, 2015 at 9:34 Claas M.Claas M. 26733 silver badges1111 bronze badges 1

• Can you show us the full part of that AngularJS Code? – Praveen Kumar Purushothaman Commented Aug 13, 2015 at 9:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Use single quotes to quote the class name

ng-class="{'pure-menu-selected': selected === category}"

The reason you can't use dashes unquoted is simple and makes sense. It's essentially the key of an object. It's the same reason a variable name cannot contain dashes.

Say you tried to have a variable name a-b. Does that mean a variable named a-b or does it mean a minus b?

Angular is treating your class as variable and you cannot use dash in variable names. You can return class as string via function in example:

ng-class="{getHighlightedClass() : selected === category}".

Where getHighlightedClass() you mus to implement in your controller.

By the way you can bind class directly as string. In example:

ng-class="{'pure-menu-selected' : selected === category}".