When using ngClick with a parameter, the parameter is not being successfully passed

Question

When using ngClick with a parameter, the parameter is not being successfully passed

My table resembles a tree structure with two ng-repeats.

<table>
<tr ng-repeat-start="am in anArray">
<td><button ng-click="TheFunction(am)"></button></td>
</tr>
<tr ng-repeat-start="em in anotherArray">
<td><button ng-click="TheFunction2(em)"></button></td>
</tr>
<tr ng-repeat-end></tr>
<tr ng-repeat-end></tr>

By applying some functions to toggle the "correct" line, a tree-like structure is displayed on the screen where each row contains a button that triggers a function defined within the scope. In the controller, I have implemented the following functions:

$scope.TheFunction=function(am){
alert(am); //and other operations involving the am object
}
$scope.TheFunction2=function(em){
alert(em); //and other operations involving the em object
}

Despite the working functionality of the tree-like construct on the webpage and the proper execution of the respective functions upon button clicks, the passed parameters appear to be undefined when checked.

Could there be something that I overlooked?

javascript angularjs parameters angularjs-ng-repeat parameter-passing

Answer 1

Answer №1

Here is the code snippet that worked seamlessly with both ng-repeat and ng-repeat-start. I opted for ng-repeat as it provides cleaner results.

Feel free to test this out:

var app = angular.module('app', []);
app.controller('main', main)

function main($scope){
  $scope.anArray = ["a", "b", "c"];
  $scope.anotherArray = ["dog", "cat", "mouse"];
  $scope.TheFunction=function(am){
    alert(am); //perform actions on am object
  }
  $scope.TheFunction2=function(em){
   alert(em); //perform actions on em object
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app ng-view ng-controller="main">
<table>
<tr ng-repeat="am in anArray">
  <td><button ng-click="TheFunction(am)">{{am}}</button></td>
</tr>
<tr ng-repeat="em in anotherArray">
  <td><button ng-click="TheFunction2(em)">{{em}}</button></td>
</tr>
</table>
</div>

Answer 2

Here is the code snippet that worked seamlessly with both ng-repeat and ng-repeat-start. I opted for ng-repeat as it provides cleaner results.

Feel free to test this out:

var app = angular.module('app', []);
app.controller('main', main)

function main($scope){
  $scope.anArray = ["a", "b", "c"];
  $scope.anotherArray = ["dog", "cat", "mouse"];
  $scope.TheFunction=function(am){
    alert(am); //perform actions on am object
  }
  $scope.TheFunction2=function(em){
   alert(em); //perform actions on em object
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app ng-view ng-controller="main">
<table>
<tr ng-repeat="am in anArray">
  <td><button ng-click="TheFunction(am)">{{am}}</button></td>
</tr>
<tr ng-repeat="em in anotherArray">
  <td><button ng-click="TheFunction2(em)">{{em}}</button></td>
</tr>
</table>
</div>

When using ngClick with a parameter, the parameter is not being successfully passed

Answer №1

Similar questions

Text about the three.js orthographic camera: "Exploring the

in JavaScript arrays, the identifier follows the numeric value right away

Ensure your TypeScript class includes functionality to throw an error if the constructor parameter is passed as undefined

How can I add a blank selection at the bottom of my ng-options dropdown?

The concept of setTimeout and how it affects binding in JavaScript

What is the process for calculating the total sum of input values utilizing JavaScript?

What is the best way to combine two objects in AngularJS?

How to iterate over the request body in Node.js using Express?

Struggling to get JavaScript to successfully load a .txt file in order to load various links

Executing JavaScript code within a class object using ASP-VB

Sorting and Deduplicating MongoDB Data with Reduce

individualized django models field for each user

Creating "search result pages" with HTML, PHP, Javascript, and MySQL

Using Flask for AngularJS authentication

What are the benefits of integrating a jQuery plugin into an Angular directive?

Using base64 encoding and setting the binary type for Websockets

Having trouble decoding invalid JSON received from the Twilio API

Manipulate Nested Objects using an Array of Keys

I am trying to showcase a collection of images on my homepage, but unfortunately, it is not functioning as expected

Tips for accessing the value of a dynamically created textbox using JavaScript