Question

25

can't use angular value within quotes

rated 0 times [ 29] [ 4] / answers: 1 / hits: 5584 / 11 Years ago, wed, december 11, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

martina

Add To Favorites

Follow

Total Points: 101

Total Questions: 103

Total Answers: 111

Location: Seychelles

Member since Mon, Jun 28, 2021

3 Years ago

answered 11 Years ago zackeryzainv · Accepted Answer

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.