The scenario:
I was using the ng-class directive on an element that had an ng-repeat directive.
I put the ng-class on my element to add a class to my element if some conditions were met.
The problem I encountered was with my conditions. Since they had come from some JSON that
I had generated with Ruby on Rails, the keys in my JSON that returned booleans ended with
question marks. When quoted, question marks are perfectly valid in JSON keys, but when I tried to access them in my AngularJS expression using dot-notation, the console in Chrome would show an error:
The failing code:
<tr ng-repeat="foo in bars" ng-class="{'boo': foo.bar.baz? || !foo.bar.yes? }">
The error:
Error: Lexer Error: Unexpected next character at columns 39-39 [?] in expression
So the solution was to access JSON key value pairs via square-brackets, quoting the key names.
The working code:
<tr ng-repeat="foo in bars" ng-class="{'boo': foo.bah['baz?'] || !foo.bar['yes?'] }">
I discovered this solution while using AngularJS 1.0.5, Ruby 1.8.7, Rails 2.3.17
Also a good discussion here:
Is there any practical reason to use quoted strings for json keys?