creating table rows dynamically with AngularJs

Question

I have the following app using angular js that's im using to learn it with. I have a table of rows and I want to dynamically add new rows into the table. When I click the add button a new row is created, for some reason on occasions the position is incorrect. Maybe the internal counter for the row is getting messed up but I can't see how or why this is happening..?

Steps to recreate:

Click the first 'add' button - notice the new row immediately below it.
Click the second 'add' button - notice the new row immediately below it.
Click the third 'add' button - notice the position is not as expected(?)

I have a plunker available here

https://plnkr.co/edit/WA2K8TNuEE6blNB6zBvZ?p=preview

Can anyone see why this happens? The code that creates the new row is shown below

Row creation code

$scope.addRow = function(row) {
    var guid = new Date().getMilliseconds();
    var rowDate = row.date;

    var rowToAdd = {
        id: guid, 
        date: new Date(rowDate.getFullYear(), rowDate.getMonth(), rowDate.getUTCDay())
    };

     $scope.rows.splice(row.id, 0, rowToAdd);  
};

Any help much appreciated?

Thanks,

P.s if you reverse clicking the 'add' buttons, i.e. you click the third, second then the first 'add' button it works as expected - can't see why this makes a difference - I can guess it's a cursor problem but not sure why..

p.p.s the guid was to get around the angular problem with having duplicate keys restriction within an ng-repeat

First: your date formatting throws errors (Error: [ngModel:nonassign] http://errors.angularjs.org/1.4.8/ngModel/nonassign?p0=r.date%20%7CNaNate%3A%20'EEEE'&p1=%3Cinput%20type%3D%22text%22%20ng-model%3D%22r.date%20%7C%date%3A%20'EEEE'%22%20style%3D%22width%3A%20100px%22%20class%3D%22ng-pristine%20ng-untouched%20ng-valid%22%3E). Second, you could use track by $index instead of the guid: plnkr.co/edit/xq90WZNNlQJ5GFJRXEJb?p=preview — Johannes Jander
– Johannes Jander, Commented Jan 4, 2016 at 12:18
you don't need to add a random id value in order to handle duplicate keys, that's what track by $index on the ng-repeat is for. also, since that row.id is a completely random value, you can't use it as the index to locate the insertion point in splice. — Claies
– Claies, Commented Jan 4, 2016 at 12:28
in the case of your 3 item in the list, if your item has 3 rows (1, 2, 3) and you click 3, your new row will be inserted behind 3, resulting in 1, 2, 3, random). however, if you click 1, you get (1, random, 2, 3). now, click 3, and you expect it to be the last item ,but it will really be the "fourth" item, giving you (1, random, 2, random, 3). you only notice it when you add 1 and 2 first, because of the values you are printing on screen (in that case, you get (1, random, random, random, 2, 3)). Try printing the row.id on screen to see the real order. — Claies
– Claies, Commented Jan 4, 2016 at 12:36

Johannes Jander · Accepted Answer · 2016-01-04 12:33:01Z

3

I think you are using the splice() function wrong. If I understand your problem (I am not sure I do), you need to find the position of the current row, the clicked one, and based on that position insert the new row.

Here's my take on it: https://plnkr.co/edit/xq90WZNNlQJ5GFJRXEJb?p=preview - it still suffers from the problem that clicking on a later day will insert duplicate days, eg. clicking on "Thursday" will insert another "Wednesday". But the positioning is solid.

var index = $scope.rows.indexOf(row);

$scope.rows.splice(index, 0, rowToAdd);

edited Jan 4, 2016 at 12:33

answered Jan 4, 2016 at 12:24

Johannes Jander

5,0202 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jamie Over a year ago

it works looking at it.. What ever 'add' button I click it renders a new row immediately below the current row - this is what I wanted

Joao Polo · Accepted Answer · 2016-01-04 12:28:36Z

2

try to use $index to define the insert point:

at html:

<button class="btn btn-success" ng-click="addRow(r, $index)">add</button>

at js:

$scope.addRow = function(row, idx) {
    ...
    $scope.rows.splice(idx, 0, rowToAdd);

see the plunker: plunker

answered Jan 4, 2016 at 12:28

Joao Polo

2,1631 gold badge17 silver badges27 bronze badges

2 Comments

Claies Over a year ago

while this might work, using $index for this purpose is error prone as well, since $index doesn't represent the array index of the item but the position of the item in ng-repeat, meaning that filtering and sorting can cause $index to be a value different than expected.

Joao Polo Over a year ago

If there was a filter, the position of insert will be indifferent, and the parameter idx could be 0 allways. But originally the problem is the wrong point of insertion. But yes, you're correct.

Collectives™ on Stack Overflow

creating table rows dynamically with AngularJs

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related