hussain hussain - 2 months ago 18
AngularJS Question

How to resolve performance issue using ng-repeat directive?

I see some performance issue using socket.io with ng-repeat angular directive, i am receiving alot of data from backend that slow down the application so while receiving data i would not be able to click on anything. What would be the best way to deal with large list using ng-repeat, lets assume 1000 messages per minute ?

ctrl.js

$scope.event = [];
socket.on('ditConsumer', function(data) {
var obj = {
file: $scope.filename,
data: data
}
$scope.event.push(data);
}


main.html

<ul style="list-style: none;">
<li ng-repeat="message in event track by $index" ng-class="{lastItem: $last}"><span><strong>Log:</strong></span><span>{{message}}</span></li>
</ul>

Answer

first of all use some kind of message id in ng-repeat="message in event track by $index" instead of $index which is rendered each ng-repeat digest. See http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

second - you can limit visual items with limitTo filter:

ng-repeat="message in event track by message.id | limitTo:100"

hidden items will be still searchable and recoverable by other filters but not rendered in HTML