1

Got error with ng-style. Doesn't Angular allow ternary operator?

I saw a SO post that shows Angular does support ternary operator, but not sure why it doesn't work for me.

Error: [$parse:syntax] http://errors.angularjs.org/1.2.27/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=6&p3=color%3Agray&p4=%3Agray
    at Error (native)
    at http://localhost/capstar/res/libs/angular/angular.min.js:6:450
    at gb.throwError (http://localhost/capstar/res/libs/angular/angular.min.js:170:252)
    at gb.parse (http://localhost/capstar/res/libs/angular/angular.min.js:169:110)
    at http://localhost/capstar/res/libs/angular/angular.min.js:99:443
    at m (http://localhost/capstar/res/libs/angular/angular.min.js:106:93)
    at h.$watch (http://localhost/capstar/res/libs/angular/angular.min.js:107:381)
    at http://localhost/capstar/res/libs/angular/angular.min.js:203:142
    at J (http://localhost/capstar/res/libs/angular/angular.min.js:54:373)
    at g (http://localhost/capstar/res/libs/angular/angular.min.js:47:256) <td ng-style="color:{{x.isBuiltIn? 'gray' : 'black'}}" class="ng-binding">
packetie
  • 4,839
  • 8
  • 37
  • 72
  • 1
    Possible duplicate of [A ternary in templates](http://stackoverflow.com/questions/12008580/a-ternary-in-templates) – plaes Dec 19 '15 at 21:21
  • @plaes, I cooked up this code after seeing that but got the weird error for Angular noob :-) – packetie Dec 19 '15 at 21:23

1 Answers1

2

The error is not caused by the ternary operator, it gets evaluated as expected. You misuse ng-style, as it expects an expression which evaluates to a js object.

Any of the following should work:

<td style="color:{{x.isBuiltIn? 'gray' : 'black'}}" class="ng-binding">
<td ng-style="{ color: x.isBuiltIn? 'gray' : 'black' }" class="ng-binding">
Tamas Hegedus
  • 28,755
  • 12
  • 63
  • 97