CODEWITHSUNDEEP
javascriptangularjsperformanceangularjs-ng-repeat
hussain
hussain

Reputation: 7123

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>

Upvotes: 1

Views: 975

Answers (1)

Andriy
Andriy

Reputation: 15452

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

Upvotes: 6

Related Questions