简体   繁体   中英

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.

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

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>

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM