I am currently working on building an array of objects using AngularJS.
Initially, I start with just one object. When the user clicks on a button, it adds another object to my array.
The button functionality is as follows;
HTML:
<button ng-click="ajoutForme()" type="button" class="btn btn-default">+</button>
Angular:
$scope.ajoutForme = function(){
$scope.nbrForme++;
}
This part works fine and I can see nbrForme increasing on the page.
However, this button actually adds a row that needs to be filled in my table. So, every time the button is clicked, I want to insert a new row into my table.
I accomplish this by doing the following;
Angular:
$scope.row = [];
$scope.$watch('nbrForme', function() {
for(i=0; i<nbrForme; i++){
$scope.row.push({
id: i
});
}
});
By watching the nbrForme, a new object is created inside the array row every time the button is pressed.
To visualize the changes, I display the row array on my page like this:
HTML:
row = {{row}}
Before pressing the button, there is only one object with an id of 0; Upon pressing the button, I can see the new object being added to the array, but the id always remains 0.
As a result, the output looks like this:
row = [{"id":0},{"id":0},{"id":0},{"id":0},{"id":0}]
Therefore, I am questioning why the i variable is not being properly incremented.