AngularJS Json array of object

Question

I am trying to build an array of object using AngularJS.

Fisrt I start with only 1 object. When the user click on a button it add a object to my array.

This is the button part that is working;

HTML:

<button ng-click="ajoutForme()" type="button" class="btn btn-default">+</button> 

Angular:

$scope.ajoutForme = function(){ $scope.nbrForme++; } 

This is working as expected and I can see nbrForme incrementing on the page.

But this button is actually adding a row to be filled in my table. So everytime the button is clicked I want to insert a new row to my table.

I do the following;

Angular:

$scope.row = []; $scope.$watch('nbrForme', function() { for(i=0; i<nbrForme; i++){ $scope.row.push({ id: i }); } }); 

Since I am watching the nbrForme. Everytime the button is pressed a new object is created inside the array row.

I am displaying the row array on my page to see the changes and I do it like this:

HTML:

row = {{row}}

So before I press the button I have only one object with an id of 0; Everytime I press the button I can see the new object getting added to the array but the id is always 0.

So im getting an output that look like:

row = [{"id":0},{"id":0},{"id":0},{"id":0},{"id":0}] 

So I am wondering why the var i is not being incremented.

Answer 1

Do it like this:

$scope.nbrForme = 0; $scope.row = []; $scope.ajoutForme = function(){ $scope.row.push({ id: $scope.nbrForme++ }); } 

Answer 2

Can try it

$scope.ajoutForme = function(){ $scope.nbrForme++; $scope.row.push({ id: $scope.nbrForme }); } 

when you used

for(i=0; i<nbrForme; i++){ $scope.row.push({ id: i }); } 

every time starting push in row from 0 to nbrForme. so you pushed duplicate object that unexpected and may will show error when try to show in DOM using ng-repeat without track by.