角度ng重复导致闪烁

Question

我正在使用以下代码显示缩略图列表:

<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>

在控制器中,我有一个ajax请求,它抓取新的缩略图图像.Angular因此更新图像但导致闪烁.有没有办法在更新DOM的过程中双重缓冲区或没有删除列表？

Answer 1

为了配合@ cexbrayat的答案,如果你没有任何身份证,你也可以将其关联起来track by $index.这是ng-repeat期间的内部迭代#.

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

Answer 2

您可以使用track by您的ng-repeat一个唯一的标识符.如果我认为你的频道对象有一个id,你可以这样做:

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

跟踪避免了每次更新时完整的DOM删除和重新创建,因为Angular将能够跟踪元素是否与先前相同并将保留DOM元素.