Angular ng-repeat causes flickering

All we need is an easy explanation of the problem, so here it is.

I’m displaying a list of thumbnails with this code:

<div class ="channel" ng-repeat ="channel in UIModel.channels" ng-class ="{evenchannel: ($index % 2) == 0, oddchannel: ($index % 2) == 1}">
            <img class="channel-img" ng-src ="data/channels/{{$index + 1}}/thumb"/>
</div>

In the controller I have an ajax request which grabs new thumbnail images. Angular thus updates the images but causes flickering. Is there a way to double buffer or not have the list deleted in the process of updating the DOM?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

To go along with @cexbrayat’s answer, if you don’t have any IDs you can also just associated it and track by $index. Which is an internal iteration # during an ng-repeat.

<div ng-repeat="channel in UIModel.channels track by $index"></div>

Method 2

You can use track by in your ng-repeat with a unique identifier. If I suppose your channel object has an id, you can do :

<div class ="channel" ng-repeat="channel in UIModel.channels track by channel.id"></div>

The tracking avoids the complete DOM deletion and recreation at every updates, as Angular will be able to track if the element is the same as previously and will keep the DOM element.

Method 3

Try the answers from @Mark Pieszak and @cexbrayat first, however if you are using ngAnimate in your application, they may not completely solve your problem.

In addition to:

<div class="channel" ng-repeat="channel in UIModel.channels track by channel.id"></div>

I needed to add the following CSS to disable animation for this ng-repeat:

.channel .ng-leave, .channel .ng-leave-active {
    display: none !important;
}

.channel .ng-move, .channel .ng-move-active {
    display: none !important;
}

This ensures that once the animation starts, the item is immediately hidden. The alternatives are to actually use an animation, or to disable the animation on the element in code with $animate.enabled('div.channel', false);.

Method 4

I was having the same issue, using the track by $index finally resolved the problem for me. At first I didn’t think it did, as I used it directly in the image tags where another ng-repeat was. Once I put it in the parent div (as well) on ng-repeat it worked:

<div ng-repeat="item in blah track by $index">
   <!-- stuff -->
   <!-- later in this div: -->
   <img data-ng-repeat="dict in item.blah track by $index" class="smallPics ng-cloak" src="{[dict.path]}"></img>

   <!-- and the rest is blah-istory -->

Method 5

As a note:

If using track by $index doesn’t update the DOM with the new values,
consider using a track by 'the properties you expect to change' just be careful to avoid ngDupe errors

e.g:

<div ng-repeat="channel in UIModel.channels track by customExp(channel)">

.
.
.

$scope.customExp = function(chan) {
    return chan.id+chan.thumbnail_url; // this has to ensure uniqueness
}

or

<div ng-repeat="channel in UIModel.channels track by channel.id+channel.thubnail_url">

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply