Collection repeat not updating when splicing from list using timeout

ionic-v1
1

First off - loving this framework so far!

Am having a problem using collection repeat with timeouts. I am doing a collection-repeat on a set of divs (which themselves have an image inside them). On a swipeLeft, I’d like to remove one of the divs. If I pass the swipeLeft through to my controller, and then do a $scope.cards.splice(index, 1), everything works well - the item gets removed from the list.

But I’d like to be able to give the user some feedback that they’ve just removed the item (could be anything, some temporary styling, animation, etc). So right now I’m adding an overlay within the div, and then calling $scope.cards.splice(index, 1); within a standard setTimeout() with delay 1000.

I can confirm that the splice does happen, and the list.length gets shorter by 1, but the UI doesn’t update. And if I try removing the div element at the same time that I splice the card from the array, the div gets removed, but the blank space remains. (Inspecting the layout indicates that this is due to the magic within collection-repeat).

Any help much appreciated :slight_smile:

2

Can you reproduce this in a Codepen or share your code?

3

Here’s a code pen example. You’ll want to comment/uncomment the timeout and non-timed-out examples respectively.

if you scroll down the list a bit and then scroll up, you’ll see that it’s removed. (Presumably because the nature of the collection-repeat is to unload it on scroll-down, and then it can’t re-load on scroll back up because it’s no longer in the array:

4

Try using $timeout instead of setTimeout:

http://codepen.io/brandyshea/pen/vEMEYz

Let me know if this works for you.

See this article: https://coderwall.com/p/udpmtq/angularjs-use-timeout-not-settimeout

5

Aha! Works a charm. Thank you!

1 Like
6

You’re welcome! :smile: