CODEWITHSUNDEEP
javascriptangularjsparametersangularjs-ng-repeatparameter-passing
Myko
Myko

Reputation: 59

ngClick with parameter does not pass the parameter

I got a treelike table 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>

With some function to show/hide the "correct" line the result on screen is a tree with each row having a button to call a function defined in the scope. In the controller I defined the function:

$scope.TheFunction=function(am){
alert(am); //and other things to do with the am object
}
$scope.TheFunction2=function(em){
alert(em); //and other things to do with the am object
}

If I run the page, the treelike construct is working as expected, all buttons are shown. If I click on a button the correct function is called. But, when I check the passed parameter, it is undefined.

Is there anything I missed?

Upvotes: 1

Views: 124

Answers (1)

Z-Bone
Z-Bone

Reputation: 1584

Here is your code.. It worked with both ng-repeat and ng-repeat-start. I used ng-repeat since it is cleaner..

See if this works for you:

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); //and other things to do with the am object
  }
  $scope.TheFunction2=function(em){
   alert(em); //and other things to do with the am 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>

Upvotes: 1

Related Questions