Why is AngularJS complaining about an unexpected token in an expression when I try to use a string?

Question

I have the folowing attribute on a div: ng-show="state.name === 'index'". I've also tried ng-show='state.name === "index", but I keep getting the following error:

Syntax Error: Token '"index"' is an unexpected token at column 16 of the expression [state.name === "index"] starting at ["index"].

Why?

Furthest

Alas, Google search queries ("unexpected token angularjs") sent me here, but OP's issue has been resolved in Angular 1.1.2 already, it seems. – Oxy

Answer 1

I found the problem. Instead of "state.name==='index'", I should have written "state.name=='index'". pkoziowski.opensource was right, in that you can't use conditional statements, but what they mean by that, is that you can't use if statements, or any control flow statements for that matter, so you couldn't do this:

<span ng-init="if(state.name == 'o'){doFoo();}">o</span>

Furthest

Answer 2

ng-show takes an "AngularJS statement." This type of statement only has an == operator, but this operator behaves like ===. It's a bit confusing, but handy in that you cannot shoot yourself in the foot with weird type coercion.

Esquiline

Whew, thanks. Thought I was going crazy with my === comparison – Dickson

Answer 3

A new answer is now possible for this question: you may be using an old version of AngularJS, because newer versions do not have this.

See here a repro of OP's issue with the latest version at the time the question was asked (1.1.0):

angular.module("demo", [])
  .controller("myctrl", function($scope) {
    $scope.state = { name: "test" };
  });

<script src="https://code.angularjs.org/1.1.0/angular.js"></script>
<div ng-app="demo" ng-controller="myctrl">
  (this snippet explicitly errors out, reproducing OP's issue)<br>
  <input ng-model="state.name">
  <div ng-show="state.name === 'test'">visible when "test" is in the input</div>
  Debug info: <pre>{{state | json}}</pre>
</div>

And see here the same code, but with version 1.5.6, the latest version at the time of writing this answer:

angular.module("demo", [])
  .controller("myctrl", function($scope) {
    $scope.state = { name: "test" };
  });

<script src="https://code.angularjs.org/1.5.6/angular.js"></script>
<div ng-app="demo" ng-controller="myctrl">
  Working version<br>
  <input ng-model="state.name">
  <div ng-show="state.name === 'test'">visible when "test" is in the input</div>
  Debug info: <pre>{{state | json}}</pre>
</div>

Presumably this was fixed in 2013, version 1.1.2, because the change log mentions:

• $parse: allow strict equality in angular expressions (a179a9a9, #908)

Footnote: I've phrased the above as an answer to the question. If you're upvoting my answer, that unfortunately probably means that you landed on this thread with a search query like I had, only to find out that the "unexpected token" error you're getting is not caused by the issue OP had here...

Oxy