CODEWITHSUNDEEP
angularjs
Ami Heines
Ami Heines

Reputation: 500

Angular ng-repeat ng-click parameter not passed to function call, why?

I have a short plunker with the details. Basically what I'm trying to achieve is a list of buttons with a click function and the function doesn't get the item - it returns the literal name of the variable. Very strange.

http://plnkr.co/edit/hFt91zkF8lZiPVvfvS4R?p=preview

<li ng-repeat="comp in listOfItems"><button class="btn btn-default" ng-click='onSearchBtnClick("{{ comp }}")' >{{ comp }}</button></li>

the list of buttons is shown correctly and in the chrome dev tools it shows the correct function call as:

ng-click="onSearchBtnClick("when")"

The manually added <li> works as expected. the others get {{ comp }} as the string instead of the value of it.

Upvotes: 0

Views: 2926

Answers (3)

Joao Penas
Joao Penas

Reputation: 23

You can do the following expression.

<li ng-repeat="comp in listOfItems"><button class="btn btn-default" ng-click="onSearchBtnClick('{{comp}}')" ></li>

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

Just use onSearchBtnClick(comp). The property exists on scope and does not need to be interpolated. By using "" you are actually using a string literal as an argument and thus passing in "{{ comp }}", literally.

Upvotes: 1

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

you need to do like below you don't need the {{ }} inside ng-repeat

<li ng-repeat="comp in listOfItems"><button class="btn btn-default" ng-click='onSearchBtnClick(comp)' >

ng-click evaluate a expression here is the DOC, so you dont need to put {{ }}

updated Plunker

Upvotes: 1

Related Questions