AngularJs performance issue with Table and 3000+ tr?

Question

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?

Answer 1

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.

Answer 2

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