`track by $index` in ng-repeat causes list items to disappear

[isaaclyman]

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.

[sp90]

:+1: had the same problem

[platdesign]

+1

[georgediaz88]

+1

[diogomachado]

I have this problem

[diogomachado]

My solution for now: https://gist.github.com/diogomachado/575c2fe477d0e53429bc

I see in the core code the project and he use $scope associate, i believe this is blocking the directive when used track $index.

[jljouannic]

The problem seems to have been introduced in version 1.3.1. I have other problems with version 1.3.0, but not this one.

[brianfeister]

This solution seems cleaner than other ones presented:

https://github.com/a5hik/ng-sortable/issues/128

[developerant]

+1 for a solution for this

[sebastianteres]

+1

[jhendley25]

+1

[wtser]

+1

[haschu]

+1

[pdxwebdev]

+1

[joevanwanzeele]

+1

[Elegant-Bird]

Just to be clear, it's not only happening with an explicit "track by $index." The issue also occurs when adding order By: '-property' or making references to the implicit $index in general

[bestmazzo]

+1

[davidsandoz]

For the ones using the orderBy filter, a workaround is to avoid using it and rather sort the array beforehand. Then no more weird reordering or items disappearing.

[sonmays]

After poking around I found that the asSortableItem takes an optional ngModel, which will update the modelValue, so when comparing values in the apply function it has the right value. If you add ngModel to the same line as asSortableItem it should fix this issue.

[rdeutsch]

+1 for fixing this

However, the workaround above to include ngModel (along with ng-repeat) for the asSortableItem element seems to work for me. (in a case which uses orderBy filter for the ng-repeat).

[connormlewis]

This unfortunately is a deciding factor for me to not use this directive because I have no choice but to use track by $index to 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.

[btk]

+1

[daftspaniel]

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)

[DiegoAugustusCunha]

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.