Reputation: 59
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
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