如何在Angular.js的ng-class中使用包含破折号的类？

Question

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 eg 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?

Answer 1

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 ab . Does that mean a variable named ab or does it mean a minus b ?

Answer 2

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}".