can't use angular value within quotes

Question

Why does this not work:

<ul class="dropdown-menu">
  <li ng-repeat="choice in dropDownItems">
    <a class="btn" ng-click="mnuClick('{{choice}}')">{{choice}}</a>
  </li>
</ul>

But this does work:

<ul class="dropdown-menu">
  <li ng-repeat="choice in dropDownItems">
    <a class="btn" ng-click="mnuClick('xxx')">{{choice}}</a>
  </li>
</ul>

In the top example, the mnuClick() routine never gets called, but in the bottom example, it does. When I do an 'inspect element' everything looks fine.

inside expressions you don't need double curly braces. http://stackoverflow.com/questions/17878560/difference-between-double-and-single-curly-brace-in-angular-js. Its by SPEC — Maxim Shoustin, Dec 11 '13 at 20:46

score 7 · Accepted Answer · edited May 23 '17 at 11:54

It does not work, because the way you did it you are saying that you want to provide the string {{choice}} to the mnuClick function.

When providing xxx, this is actually correct, hence you need the quotes here.

But when using {{choice}}, you don't want THAT string, but you want that expression to be evaluated and its result (which is probably a string) as a parameter - hence you don't need the quotes (and not even the curly braces) here.

So just write

<a class="btn" ng-click="mnuClick(choice)">{{choice}}</a>

and you're fine :-).

To cut it short: In one case you deal with an expression which resolves to a string, in the other case you deal with a string directly. Hence one time you don't need quotes, the other time you do.

If you want more detailed information on when to use curly braces and when not, check out this answer to this question: Difference between double and single curly brace in angular JS?

Hope this helps.

PS: Inside the text of your a tag, you need the double curly-braces, as you're not in a AngularJS controlled code-block here - hence you have to mark it as binding, otherwise it'd just be text inside of HTML.

score 2 · Answer 2 · answered Dec 11 '13 at 20:45

2

The value of ng-click is interpreted as an angular expression so you don't have to use the curly brackets around "choice". Just write it like this:

<a class="btn" ng-click="mnuClick(choice)">{{choice}}</a>

answered Dec 11 '13 at 20:45

lex82

11,173
2
44
69

score 0 · Answer 3 · answered Dec 11 '13 at 20:45

0

Doesn't this work?

ng-click="mnuClick(choice)"

I've definitely done something along those lines plenty of times, but don't have code to hand to verify...

answered Dec 11 '13 at 20:45

Nat Wallbank

1,377
12
12

can't use angular value within quotes

3 Answers3