Angularjs, how to pass a scope variable to js function which changes inside ng-repeat?

Question

I have an ng-repeat loop in my html. The variable involved in the looping is displayed in table rows. I need to allow the user to click on the desired value and have a js function receive the value so it can act on it. An earlier version of my code that does not attempt to pass the value, just display it, is here and works as expected; showing the various host values from filteredList with link attributes (underlined, in my case)

<tr data-ng-repeat="update in filteredList">
  <td> <a href="#">{{update.host}}</a> </td>
  <td> {{update.date}} </td>
  <td> {{update.num}} </td>
</tr>

My attempt to pass the value of host that the user clicks on to my function "searcher" is here, but it does not work:

<tr data-ng-repeat="update in filteredList">
  <td> <a href="#" ng-click="searcher({{update.host}})">{{update.host}}</a> </td>
  <td> {{update.date}} </td>
  <td> {{update.num}} </td>
</tr>

When it is encountered, angularjs complains: Error: [$parse.syntax] Syntax Error: Token 'update.host' is unexpected, expecting [:] at column 12 of the expression [searcher({{update.host}});] starting at [update.host}});].

Can someone please advise me of a way acceptable to angularjs to pass the clicked host value to my function?

Thanks very much.

You don't need the curly brackets around variables inside the ng-click. Neither in any angular directive parameter for that matter. — sfotiadis
– sfotiadis, Commented Nov 21, 2014 at 14:29

Josh Darnell · Accepted Answer · 2014-11-21 14:30:51Z

1

As others have mentioned in the comments, this will work for you:

<a href="#" ng-click="searcher(update.host)">{{update.host}}</a> </td>

Check out the documentation for ng-click, which indicates it accepts an expression (so you don't need the {{binding}} syntax).

answered Nov 21, 2014 at 14:30

Josh Darnell

11.5k9 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

consultmac Over a year ago

Perfect, ofcourse. Thanks to all of you that suggested essentially the same thing. I overlooked the critical piece.

Josh Darnell Over a year ago

You're welcome, @consultmac. Sometimes all you need is a second set of eyes on a problem.

Ramy Selim · Accepted Answer · 2014-11-21 14:31:52Z

0

This is the right way to do it

<tr data-ng-repeat="update in filteredList">
  <td> <a href="#" ng-click="searcher(update.host)">{{update.host}}</a> </td>
  <td> {{update.date}} </td>
  <td> {{update.num}} </td>
</tr>

answered Nov 21, 2014 at 14:31

Ramy Selim

811 silver badge9 bronze badges

Comments

sfotiadis · Accepted Answer · 2014-11-21 14:32:07Z

0

Try:

<td> <a href="#" ng-click="searcher(update.host)">{{update.host}}</a> </td>

As mentioned, you don't need the curly brackets around variables inside the ng-click. Neither in any angular directive parameter for that matter.

answered Nov 21, 2014 at 14:32

sfotiadis

97710 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angularjs, how to pass a scope variable to js function which changes inside ng-repeat?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related