Loop through each current value in an ng-repeat directive and use it in an

Question

Loop through each current value in an ng-repeat directive and use it in an

I'm facing a simple issue that doesn't seem to have an easy fix. I have a ng-repeat set up like this

<p ng-repeat="title in Menu.data[Menu.selected]">
    {{ title }}         
</p>

Now, I want to add an onclick event so I adjusted it as follows

<p ng-repeat="title in Menu.data[Menu.selected]" onclick="show({{ title }})">
    {{ title }}         
</p>

Unfortunately, the onclick="show({{ title }})" is not being interpreted by Angular. Any ideas why?

UPDATE: Just to clarify, show is a regular JavaScript function and not $scope.show

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

To simplify the code, avoid using double curly braces and instead just use

onclick="show(title)"

However, when working with angular, it is recommended to use the ng-click directive instead of onclick:

ng-click="show(title)"

In both cases, there is no need for curly braces.

The function show should be defined on $scope in your controller. Here's an example:

$scope.show = show;

Answer 2

To simplify the code, avoid using double curly braces and instead just use

onclick="show(title)"

However, when working with angular, it is recommended to use the ng-click directive instead of onclick:

ng-click="show(title)"

In both cases, there is no need for curly braces.

The function show should be defined on $scope in your controller. Here's an example:

$scope.show = show;

Answer 3

Answer №2

To handle click events in Angular, it's recommended to use ng-click instead of traditional JavaScript event handlers. Since ng-click is an Angular directive, you don't need to wrap the function call in curly braces:

ng-click="displayInfo(title)"

If the displayInfo function is defined globally, you can easily make it accessible on the scope like this:

$scope.displayInfo = displayInfo;

Answer 4

To handle click events in Angular, it's recommended to use ng-click instead of traditional JavaScript event handlers. Since ng-click is an Angular directive, you don't need to wrap the function call in curly braces:

ng-click="displayInfo(title)"

If the displayInfo function is defined globally, you can easily make it accessible on the scope like this:

$scope.displayInfo = displayInfo;

Loop through each current value in an ng-repeat directive and use it in an

Answer №1

Answer №2

Similar questions

Tips for displaying a modal within a modal in React

Having trouble displaying a JSON response on an HTML page with AJAX

There are two identical instances of the function and class named "Ajax" within the prototype

Exploring the bind() method in the latest version of jQuery,

The issue arising where the callback function fails to execute after making an AJAX POST request

JavaScript 'this' pointing to incorrect object

The validation feature is ineffective when used with Material UI's text input component

Determine the fill color attribute value of a rectangle using Testcafe paired with typescript

The jQuery AJAX function successfully executes, but the MySQL post deletion operation fails to take place

Is it possible to create an HTML link that prevents users from navigating back to the previous page or displaying the previous link in their browsing history?

Oops! Next.js Scripts encountered an error: Module '../../webpack-runtime.js' cannot be located

Why is webpack attempting to package up my testing files?

Arranging JSON data based on related properties in JavaScript

Orbit around a moving object in Three.js

Prevent side-to-side scrolling on elements that exceed the width of the screen

Cancel promise chain after action dispatch (rxjs)

Is RaphaelJS truly a vector-based tool?

Testing Angular Factory Injection functionality

Adding x days to a Unix timestamp can be achieved by converting the Unix timestamp

CreateAsyncModule using an import statement from a variable