AngularJs performance issue with Table and 3000+ tr?

[Noppanit Charassinvichai]

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?

[Andy Joslin]

You could use ng-grid, which will only render the DOM elements currently visible in the DOM.

[Andy Joslin]

https://github.com/angular-ui/ng-grid

[Tony Polinelli]

interesting that you say that- would this feature work for ng-repeat aswell (only render visible) - in the future? 

On Sun, Jun 23, 2013 at 3:55 PM, Andy Joslin <andyt...@gmail.com> wrote:

https://github.com/angular-ui/ng-grid

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Tony Polinelli
http://touchmypixel.com

[Noppanit Charassinvichai]

Thanks very much. But can you point out how to do that in pure javascript. I would rather use something that's already there in Angularjs with a few tweaks rather than put in a new library. If that is possible at all. Thanks a lot.

[Kaushal Prajapati]

Best Available Solution for ng-repeat performance

I searched a lot and found below solution for this problem like

- collection-repeat (http://ionicframework.com/docs/api/directive/collectionRepeat/)

- Reactjs use (http://davidandsuzi.com/ngreact-react-components-in-angular/)

- oncejs use (https://github.com/tadeuszwojcik/angular-once)

For me best and easy to use is once js which is easy to use and also simpler one to integrate with existing code.

for more details feel free to ask.

thanks.