Cannot use angular value inside quotation marks

Question

Why this does not work:

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

But it works:

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

In the upper example, the mnuClick() procedure is never called, but in the lower example, it is executed. When I do the “check item”, everything looks fine.

Answer 1

This does not work because, as you did, you say you want to provide the {{choice}} to the mnuClick function.

When providing xxx this is really correct, so you need quotes.

But when using {{choice}} you don’t need the THAT string, but you want this expression to be evaluated and its result (which is probably the string) as a parameter, so you don’t need quotes (or even curly braces).

So just write

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

and everything is in order :-).

To shorten this: in one case you are dealing with an expression that resolves a string, in the other case you are dealing with a string directly. Therefore, one time you do not need quotes, another time you do.

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

Hope this helps.

PS: In the text of your tag a you need double curly braces, since you are not in a code block with AngularJS control, so you must mark it as a binding, otherwise it will just be text inside HTML.

Answer 2

The ng-click value is interpreted as an angular expression, so you do not need to use braces around the "selection". Just write it like this:

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

Answer 3

Does this work?

 ng-click="mnuClick(choice)" 

I have definitely done something on these lines many times, but I don't have code to check ...