Track by $index messes up animation

ionic-v1
1

I got a simple list that offers rearranging and removing items.When clicking the delete button, the correct item is being removed, but the removing-animation only applies to the last item of the list. I use class="item-remove-animate" in the html item. What am I doing wrong?

Here’s my CodePen, be sure to add a couple of entries first. I want to keep the local storage working on that one.

Thanks for any help!

2

Apparently the track by $index caused the animation not to work properly. Here is the semi working CodePen*. Unfortunately the track by $index is necessary for the list to work. Deleting an item without tracking by sth. crashes the Ionic Viewer and any iOS 7 device emulated in Xcode. But keeping the track by breaks the animation.

3

Hi,

There are problems with the animation then using $index I have two things for you.

  1. Track by something else other that the inbuilt $index for example you could do .

     								{{task.title}}
 								<ion-delete-button class="ion-minus-circled" ng-click="remove(task)">
 								</ion-delete-button>
 								<ion-reorder-button class="ion-navicon" on-reorder="moveItem(task, $fromIndex, $toIndex)"></ion-reorder-button>
 						</ion-item>

Secondly you can use things like angular.toJson(obj) rather than JSON.stringify(obj) and that will strip out any $$hashKey issues.

4

Hi taylorsuk,

Thanks so much for the reply! I tried tracking by something else (e.g. an entry in the tasks representing a concatenated string from all task data (to make each one kinda unique)) with no luck.

So I also went by your second idea. It works pretty well in the browser serve and iOS 8 emulation, but deleting still crashes all iOS 7 attempts (meaning Ionic Viewer and Xcode emulation).

Perhaps I’ll have to un-support iOS 7 then.