calling function in ng-repeat to form dynamic data table

[Jitender Saini]

I've to populate table dynamically on value change of one textbox. Everytime when I change value of textbox json rebuilds dynamically on textbox parameters and that json populate datatable. I've achived the same in jquery and javascript But I'm unable to achieve this in Angular js, Please find my code snippet below:

HTML:`<table>

   <thead>

   <tr>

 <th colspan="2">Year</th>

      <th>Principal (X)</th>    

   </tr>

   </thead>

   <tbody data-ng-repeat="t in emi.generateJson()"> 

  <tr>  

 <td>{{ t.parentDataNode.tenure }}</td>

 <td>{{ t.parentDataNode.principal }}</td>  

  </tr>   

   </tbody>

</table>`

JS: `var mainApp = angular.module("mainApp", []);

mainApp.controller('emiController', function($scope) {

$scope.emi = {

 amount: 2000000,

      tenure: 1,

 interest: 9.85, 

 emiValue:0.00,  

 totalPaymentValue:0.00,

 advanceEmi:false,  

 generateJson: function() {

var sitePersonel = {};

var tabledata = []

sitePersonel.tabledata = tabledata;

for(var i=0;i<2;i++) {

var arrParent = new Array();

arrParent.push(2015);

arrParent.push(1311418.9*i);

sitePersonel.tabledata.push({});

sitePersonel.tabledata[i].parentDataNode = returnParentData(arrParent);

for(var j=0;j<12;j++) {

var arr = new Array();

arr.push("May");

arr.push(159275.61*j);

sitePersonel.tabledata[i].parentDataNode.childDataNode[j] = returnChildData(arr);

}

}

console.log(JSON.stringify(sitePersonel));

return sitePersonel;

 }

}

});`

while I'm running this program it's generating data in table but it's throwing exception in console as:`Error: [$rootScope:infdig] http://errors.angularjs.org/1.3.15/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22m…b%26%26%5Cngc(b))%3Breturn%20h%7D%22%2C%22newVal%22%3A%2287.56%22%7D%5D%5D

    at Error (native)`

I know that calling function in ng-repeat is not good approach, But my requirement is something like that I have to call this function here. Can someone please suggest me the right approach to form the data table dynamically with a json that is dynamically forming every time on change of some textbox etc.

Thanks

Jitender

[Sander Elias]

Hi Jitender,

This will never work. You are rebuilding the data you are traversing. So, angular has to start over iterating when the data changed, which is on every row of your table. It has to throw away what it has build, and start again. That is an endless loop.

Prebuild the table in your controller, and use ngRepeat to traverse the result of that.

Regards

Sander

[Jitender Saini]

Hi Sander,

Thank you very much for your prompt response, It will be great if you can post a small example for the same. I'm new to Angular, I agreed that ng-repeat every time call the function, But my concern is if I prebuild the table and iterate with ngrepeat then how data will change in table if I change the value of text box. I want to bind table generation with some textbox values.

I know the right approach could be something like

<table ng-init="list = emi.generateJson().tabledata">

   <tr  data-ng-repeat="subject in list">

  </tr>

</table>

but in above case I can not rebuild table on change of textbox value.

Thanks

Jitender

[Sander Elias]

Hi Jitender,

Don't use an ng-init, use a function on your controller to update the array inside the controller. Then put an onchange on your input, that fires off this function. That's all.

Regards

Sander