1

I'm facing some performance issue with ng-repeat and 1000+ <tr> some googling tells me that I have to roll my own directive to overcome $digest cycle. I don't understand what should I do about that? Can somebody please explain this and how can I improve the performance. I have to show all the 1000+ rows that's the requirement and right now it takes almost 20s to create the entire table.

Thanks very much.

<tr ng-repeat="obj in objs" id="obj{{obj.id}}" ng-show="displayObj(obj)">
    <td>{{obj.objId}}</td>
    <td style="min-width: 70px;">
        <textarea rows="3" style="width: 100px" name="text" maxlength="100" ng-model="obj.text"></textarea>
    </td>
    <td><button class="btn btn-primary" ng-click="saveObj($event, obj)">Update</button></td>
</tr>

In Controller

$scope.saveObj = function ($event, obj) {
                console.log(deal);
                var UpdateObj = ObjService.updateObj();
                var updateObj = new UpdateObj();

                updateObj.text = obj.text;
                updateObj.$update({objId: obj.id});
            };

Now I realised that the performance issue comes from $apply which I have around 3000 elements. if I take ng-model off, the performance is better. But I would lose two-way data binding. Is there anyway I could tune the performance here?

toy
  • 11,711
  • 24
  • 93
  • 176
  • Take a look at this http://stackoverflow.com/a/9693933/527968 also the main issue isn't row count but *bindings* count. You should have in general around 2000 bindings at any one time. – Liviu T. Jun 21 '13 at 15:52
  • Also any code you can post would help – Mike Robinson Jun 21 '13 at 16:00
  • just *only display the data in the view*. I use a filter for that. – Ven Jun 21 '13 at 16:05
  • How do you use filter fir that? – toy Jun 22 '13 at 06:20
  • Also, somebody suggests that i should be using directive instead. Would it mean i use ng-repeat in conjunction with directive or pure directive? Thankd – toy Jun 22 '13 at 08:33
  • I have updated to include the source code. Please check. Any suggestion I would be really appreciated. – toy Jun 23 '13 at 11:36

2 Answers2

0

In the case that someone is stumbling upon this question now, I would generally recommend infinite-scroll. It makes the filter operation that @toy mentioned very simple. When they include an option for removing off-screen elements that you've scrolled past it will be the killer angular ng-repeat performance option.

urban_raccoons
  • 3,499
  • 1
  • 22
  • 33
0

Anyone facing this issue now, should use something like bind-once.

Most of the data once loaded does not change and hence can be made immutable, bindonce removes watchers from binding to improve performance.

It is very easy to use and had a very good documentation.

https://github.com/Pasvaz/bindonce

Also, you should not load 1000 of rows at once, you can simply avoid this by loading data on demand by implementing server-side pagination.

This article explains. Server Side Pagination in AngularJS

rahil471
  • 304
  • 2
  • 7