ng-sortable: `track by $index` in ng-repeat causes list items to disappear
If you add track by $index to the ng-repeat expression of the node with the as-sortable-item directive on it, then the drag-and-drop behavior breaks. When dragging any item to its own place in the list, it disappears, though sometimes dragging another item will cause it to reappear in place of the first item.
http://plnkr.co/edit/uCtpVyS3LmveHv9zrt14?p=preview
The only thing that has been changed is adding track by $index to both ng-repeat statements.
To see the breaking behavior, drag an item from position 2 to position 3 in the list, then click and drag the item in position 2 but don’t change its place – drop it back where it was.
This may be a problem for anyone trying to optimize an AngularJS application, since one of the best ways to speed up ng-repeat rendering is to add a track by statement.
About this issue
- Original URL
- State: open
- Created 9 years ago
- Comments: 23
This unfortunately is a deciding factor for me to not use this directive because I have no choice but to use
track by $indexto avoid angular’s duplicates error inside the ng-repeat. I’ve seen several times the maintainer say that this is “a documented issue”, but never seen any comment on if we should see a fix coming or not.After poking around I found that the
asSortableItemtakes an optionalngModel, which will update the modelValue, so when comparing values in theapplyfunction it has the right value. If you addngModelto the same line asasSortableItemit should fix this issue.Hit this issue this morning in a drag and drop situation. Some items were not being displayed despite the data being intact.
Avoiding use of $index seemed to solve it, I used
track by (myarray.length + item.id*100)I had the same problem using the version of bower 1.3.8, your solution solved perfectly.