Angularjs parse error sometimes when using brackets

Question

In the following code sample why are the brackets necessary around position[0].position in the ng-click directive in the anchor element but not in the ng-show directive in the divs?

<div ng-controller="PlayersController as pl">
  <section ng-init="tab = 'goalkeepers'">
    <li ng-repeat="position in pl.players">
      <a href ng-click="tab = {{position[0].position}}">{{position[0].position}}</a>
    </li>
  </section>
  <div ng-repeat="position in pl.players">
    <div ng-repeat='player in position' ng-show="tab === position[0].position">
      <h2 ng-show='$first'>{{player.position}}</h2>
      <h3>{{player.name}}</h3>
      <h4>{{player.price | currency: '£': 0}} {{player.score}}</h4>
    </div>
  </div>
</div>

Does it have to do with setting equality versus checking for equality? Is it related to the nested ng-repeat?

When I add brackets around the equality check in ng-show in the div element I get a parse error, why?

score 2 · Accepted Answer · answered Sep 26 '15 at 07:42

2

In Angular expressions need to be within the curly-brace bindings, where as Angular directives do not.

As we understand that ng-click is a directive you don't need to add curly-brace there.

answered Sep 26 '15 at 07:42

maddygoround

2,145
2
20
32

Thanks for that, wasn't entirely clear on the difference between an Angular directive versus an expression. I'll look it up. – Adam Solomon Sep 27 '15 at 08:23

score 1 · Answer 2 · answered Sep 26 '15 at 07:40

1

You don't need the brackets in the ng-click attribute. Angular evals the value of the attribute so just ng-click="tab = position[0].position;"

answered Sep 26 '15 at 07:40

user2696128

191
1
2

Angularjs parse error sometimes when using brackets

2 Answers2