Performing a function when text is clicked: Utilizing AngularJS

Question

Performing a function when text is clicked: Utilizing AngularJS

My goal is to trigger a specific controller method upon clicking on certain text. This function will then make remote calls to another server and handle the display of another div based on the response. Additionally, I need to pass parameters to this function - one being static text and the other an AngularJS variable (an element from a list I am iterating through).

However, I am unsure about the correct approach as the code snippet below doesn't seem to be working:

<div ng-repeat="item in item_list">
    <div><p ng-click="functionToInvoke({{item.name}}, 
        'static text')">{{item.name}}</p></div>

This results in a compile error within the paragraph tag.

How should I address this issue?

javascript angularjs

Answer 1

Answer №1

When defining a function within the ng-click attribute, you do not need to use {{}}

<div ng-repeat="item in item_list">
    <div>
        <p ng-click="functionToInvoke(item.name, 'static text')">{{item.name}}</p>
    </div>
</div>

The function can be structured as follows:

$scope.functionToInvoke = function(var, static){
    console.log('Variable: ' + var);
    console.log('Static value: ' + static);
}

Answer 2

When defining a function within the ng-click attribute, you do not need to use {{}}

<div ng-repeat="item in item_list">
    <div>
        <p ng-click="functionToInvoke(item.name, 'static text')">{{item.name}}</p>
    </div>
</div>

The function can be structured as follows:

$scope.functionToInvoke = function(var, static){
    console.log('Variable: ' + var);
    console.log('Static value: ' + static);
}

Performing a function when text is clicked: Utilizing AngularJS

Answer №1

Similar questions

Ways to customize background color for a particular date?

I am experiencing an issue in Next.js where the styling of the Tailwind class obtained from the API is not being applied to my

`amqplib - What is the current number of active consumers on the queue?`

Should ASP.NET MVC and Azure web roles be combined or kept separate?

How can I display color without using Winston's color formatter in text?

Enhancing Performance with Web Workers in Angular CLI

Ensure Angular JS includes a space or special character after applying a currency filter

What is the reason for updating only one out of three charts using react-chartjs-2?

String ES6 syntax immediately after function

Looking to access the layout details of an HTML element similar to what can be done in Firefox's debugger tool?

What steps are involved in integrating QuickBlox on your website?

Node.js tip: track down and address ignored errors in your code

Angular ng-show failing to execute condition

Get the file without specifying type in request - Angular

Combining Key-Value pairs in JavaScript using JSON

Exploring properties of nested elements in React

The sequence of elements within a React.addons.createFragment object

When applying the OWASP ESAPI encodeForHTMLAttribute method, I noticed that symbols are being rendered as their corresponding HTML entity numbers instead of the actual symbols

Uh oh! There seems to be an issue with the ClerkJS frontendAPI option. Visit the homepage at https://dashboard.clerk.dev to retrieve your unique Frontend API value

Tips for improving the scrolling function in Java with Selenium for optimal performance