CODEWITHSUNDEEP
javascriptangularjs
consultmac
consultmac

Reputation: 3

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

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.

Upvotes: 0

Views: 542

Answers (3)

sfotiadis
sfotiadis

Reputation: 977

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.

Upvotes: 0

Ramy Selim
Ramy Selim

Reputation: 81

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>

Upvotes: 0

Josh Darnell
Josh Darnell

Reputation: 11433

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).

Upvotes: 1

Related Questions