How can I pass a dynamic scope variable to a JavaScript function in AngularJS that is being updated within an ng-repeat loop?

In my HTML, I have an ng-repeat loop where a variable is displayed in table rows. I want the user to be able to click on a value and pass it to a JavaScript function for further action. The code snippet below showcases my earlier version which successfully displays host values from filteredList with link attributes:

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

However, my attempt to pass the clicked host value to my "searcher" function using ng-click doesn't work as expected:

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

AngularJS throws an error when encountering this code: Error: [$parse.syntax] Syntax Error: Token 'update.host' unexpected, expecting [:] at column 12 of the expression [searcher({{update.host}});] starting at [update.host}});].

I am seeking advice on how to properly pass the clicked host value to my function in a way that AngularJS accepts.

Thank you!

Answer №1

Multiple individuals have pointed out in the comments that the following code will be effective for your situation:

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

For more details, you may want to refer to the documentation related to ng-click. It explains that ng-click accepts an expression (thus eliminating the need for using {{binding}} syntax).

Answer №2

This is the correct method to accomplish this task

<tr data-ng-repeat="result in filteredData">
  <td> <a href="#" ng-click="search(result.keyword)">{{result.keyword}}</a> </td>
  <td> {{result.time}} </td>
  <td> {{result.count}} </td>
</tr>

Answer №3

Give this a shot:

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

Just a reminder, there's no need to include the curly brackets around variables within ng-click or any other angular directive parameter.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extract information from a specific div element and save it to a text file

I'm currently working on extracting data from a div and sending it to a PHP file using the following JavaScript: $(document).ready(function(){ $('#save').on('submit',function(e) { var bufferId = document.getElementById ...

A step-by-step guide on simulating a click event on an element in React with the help of jest and react-testing

My component displays the following {list.options && list.options.length > 0 ? ( <div data-testId="MyAlertText" onClick={onAddText}> Add Text </div> ) : null} When testing, I am executing the following it('Ensure Add Text lin ...

Include CakePHP named parameters in the URL when selecting from a list

If I have a selection list like the one below: <select name='languages'> <option value='german'>German</option> <option value='english'>English</option> </select> How can I use Jav ...

Creating a seamless vertical marquee of several images that continuously scroll from bottom to top without interruption can be achieved by following these

Currently, I am seeking to design a mobile-friendly HTML page that features a border with multiple color images moving smoothly from bottom to top on both the right and left sides of the mobile screen. The transition should be seamless without any gaps o ...

Encountering difficulties in importing TailwindCSS

Having trouble importing TailwindCSS and applying CSS? Here's how it's included in my package.json: "devDependencies": { "autoprefixer": "^10.2.4", "css-loader": "^5.1.1", "postc ...

What is the process for transferring an environment.json file to the output directory and then utilizing it with Webpack 4?

Our application is expanding with multiple environments and vendors on the horizon. While the traditional approach of running webpack --env.NODE_ENV=myenvironment works for now, it will soon become inefficient. The main objective here is to streamline the ...

Issue with Browsersync functionality in Docker

My Node.js app is facing an issue with Gulp, Browsersync, and Docker. When I run gulp watch locally, everything functions correctly. However, when I utilize docker-compose up, I encounter an error Cannot GET / The Browsersync UI on port 3001 is operat ...

Struggling to utilize the filter technique in JavaScript?

Hey there, I'm facing a challenge in my JavaScript course. The exercise requires the creation of a function that filters an array to only keep strings with less than 10 characters. I've made several attempts at solving this problem, but haven&ap ...

Can the data from these JSON elements be obtained?

Suppose I have a JSON file with the following structure: { "update" : { "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a6aea2aaaf83a4aea2aaafeda0acae">[email protected]</a>":{ "1234": {"notfication" ...

Monitoring changes in the AngularJS $rootScope and intercepting HTTP requests with $http for use with the ajaxSpinner directive

I am seeking help to understand why the code in ajaxSpinner directive does not recognize the changes made to $rootScope.requestCount field inside $http.defaults.transformRequest and $httpProvider.responseInterceptors. Can someone please explain this? Than ...

How to extract parameters from an http get request in Node.js

Trying to handle an HTTP request in this format: GET http://1.2.3.4/status?userID=1234 I am unable to extract the parameter userID from it. Despite using Express, I am facing difficulties. Even when attempting something like the following, it does not yi ...

The documentation for Gridsome/Netlify CMS has a flaw that results in Graphql not functioning

My attempts to integrate Gridsome with NetlifyCMS using Gridsome's documentation have been unsuccessful. Below is a snippet of the Netlify config.yml setup: collections: - name: "posts" label: "Posts" folder: "posts" create: true s ...

I am looking to retrieve the values of checked checkboxes in a MUI multi-select component

I am currently using Material-UI's mui multi select component and I need to determine whether an item is selected or unselected in order to set the correct state value. I have checked the event.target but it does not seem to have a checked attribute. ...

How to Show a GIF in ASP.NET Core 3.0 When OnPost() is Invoked

I'm struggling to incorporate a GIF into my website, and after researching different sources, I've discovered that I need to utilize some Ajax and Javascript. However, I lack experience with both of these technologies. Is there anyone who could p ...

Please ensure there is space reserved for the header above the content

Currently, I am working on creating a webpage with a unique banner design. My goal is for the content to scroll from the bottom and remain fixed directly under the upper portion of the banner. Initially, my idea was to have the content box take up the siz ...

The benefits of installing gulp plugins locally versus globally

Being a newcomer to Gulp, I have a query: should I install gulp plugins (like gulp-sass or gulp-imagemin) locally or globally? Most online examples suggest installing them locally using the --save-dev option. This method saves the modules in the local node ...

When the "x" close icon is clicked, the arrow should toggle back to 0 degrees

I've been tackling the challenge of creating an accordion and I'm almost there. However, I'm facing an issue where the arrow doesn't return to its original position after clicking the close "x" icon. The toggle works fine but the arrow ...

Using JS/AJAX to update a section of a webpage when a button is clicked

Currently, I am working on developing a generator that will display a random line from a .txt file. Everything is going smoothly so far, but I have encountered an issue - I need a specific part of the page to refresh and display a new random line when a ...

Using TypeScript, extract the value of a Promise from a Page Object

Struggling to retrieve a value from a WebDriver promise in a Protractor solution using TypeScript, the response keeps coming back as undefined. get nameInput(): string { var value: string; this.nameElement.getAttribute('value').then(v =& ...

When only showing the title to the client, it results in an undefined value

I have created a schema in mongoosejs that looks like this: var uploadSchema = mongoose.Schema({ title : String, happy : String, }); I am trying to show the data from my database on the client side (using ejs for templating) ...