S
S
Sasha2015-05-04 10:58:28
Angular
Sasha, 2015-05-04 10:58:28

AngularJS ng-repeat optimization, long page rendering, how to fix?

Hello.
There is such a list consisting of 50+ objects in an array that is accordingly output through ng-repeat in html, how can I optimize page rendering due to ng-repeat output?
List

//
var tableUsers = angular.module('tableUsers', []);
tableUsers.controller('tableUsers_list', ['$scope', function($scope){
  $scope.list = [
    {
      id:1,
      initials:'Jana Pallaske',
      yearStart:'2012',
      visits:183202,
      rate:17483,
      ip:'174.100.87.24',
      status:'active'
    },
    {
      id:2,
      initials:'Carolina Schuchardt',
      yearStart:'2011',
      visits:198102,
      rate:22013,
      ip:'140.172.33.10',
      status:'locked'
    }
  ]
}]);

So I output this whole thing in html
<tr data-ng-repeat="user in list | orderBy:sort:reverse">
  <td>{{user.id}}</td>
  <td>{{user.initials}}</td>
  <td>{{user.yearStart}}</td>
  <td>{{user.visits}}</td>
  <td>{{user.rate}}</td>
  <td>{{user.ip}}</td>
  <td data-status="{{user.status}}">{{user.status}}</td>
</tr>

Answer the question

In order to leave comments, you need to log in

3 answer(s)
D
Dmitry Dedukhin, 2015-05-04
@Demetros

Optimize for what? Is this rendering slow for you?
50 elements is nothing at all, but you can precalculate sorting, because filters are called often enough.
You can also try adding track by user.id to ng-repeat.

K
Kano, 2015-05-04
@Kano

You can also remove bidirectional binding by adding two colons to all records before the field name, for example: {{::user.id}}

M
Maxim, 2015-05-06
@xbagir

Are you sure that it is the cycle that is slowing down? $scope.list comes from where?
Loops are very fast and 50 items is nothing at all.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question