Marilou Marilou - 6 months ago 26
AngularJS Question

How can I use a javascript || with ng-class?

I am trying to set a class like this:

ng-class="{fa-disabled: cursorWait || wos.wordFormRowIsDisabled(wf)}"


What I would like is for the fa-disabled class to be added if cursorWait == true or if the wos.wordFormRowIsDisabled function returns true.

But this is giving me a run timer error:


angular.js:13236 Error: [$parse:syntax] Syntax Error: Token '-' is unexpected, expecting [:] at column 4 of the expression [{fa-disabled:


cursorWait || wos.wordFormRowIsDisabled(wf)}] starting at [-disabled:
cursorWait || wos.wordFormRowIsDisabled(wf)}].
http://errors.angularjs.org/1.5.0/$parse/syntax?p0=-&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=4&p3=%7Bfa-disabled%3AursorWait%20%7C%7C%20wos.wordFormRowIsDisabled(wf)%7D&p4=-disabled%3A%cursorWait%20%7C%7C%20wos.wordFormRowIsDisabled(wf)%7D


Can someone help and advise what is wrong?

Answer

The binding is failing because it's not valid to use - in an object's property name unless the name is quoted.

Try

ng-class="{'fa-disabled': cursorWait || wos.wordFormRowIsDisabled(wf)}"