Geek Answers Handbook

How to increase ng-repeat performance with Smart-Table?

I have a performance problem and I have not found a solution.

Context: I need to display a lot of data (500 rows, 8 columns) in a table. To display this data, I decided to use a Smart table because it offers good functionality, but the problem is that I have a lot of data and the data display time is very long (5-9 seconds, it depends on the performance of the device).

The important thing: I need to display all the data, so I do not need a way of pagination, a filter of restrictions.

So this code works:

<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" > <table st-table="tableaux" class="table table-striped"> <thead> <tr> <th ng-repeat="column in ColumnTable">{{column.Label}}</th> </tr> <tr> <th ng-repeat="column in ColumnTable"> <input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/> </th> </tr> </thead> <tbody> <tr ng-repeat="row in tableaux"> <td ng-repeat="column in ColumnTable" ng-init="colonne = column.Id">{{row[colonne]}}</td> </tr> </tbody> </table> </ion-scroll>

I read that Ionic made a ( collection-repeat ) directive that allows an application to display huge lists of items much more realistically than ng-repeat. So I tried to redo my solution using the replay collection, but that wont work ...

Solution for collecting code collections:

 <ion-scroll class="scrollVertical"> <table st-table="tableaux" class="table table-striped"> <thead> <tr> <th ng-repeat="column in ColumnTable">{{column.Label}}</th> </tr> <tr> <th ng-repeat="column in ColumnTable"> <input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/> </th> </tr> </thead> <tbody> <tr collection-repeat="row in tableaux" item-width="200px" item-height="100px"> <td collection-repeat="column in ColumnTable" ng-init="colonne = column.Id" item-width="100px" item-height="100px">{{row[colonne]}}</td> </tr> </tbody> </table> </ion-scroll>

Error: Maximum Call Stack Size Exceeded

Questions: is there any angular or ionic solution to improve the performance of a smart table with a lot of data? What happened to my repeat collection?

+5
source share
2 answers

What version of Ionic are you using? If you are using version 1.0 beta 14 or higher, use bind once (native in Angular 1.3)

He would like to do it.

 <ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" > <table st-table="tableaux" class="table table-striped"> <thead> <tr> <th ng-repeat="column in ::ColumnTable">{{::column.Label}}</th> </tr> <tr> <th ng-repeat="column in ::ColumnTable"> <input st-search="{{::column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/> </th> </tr> </thead> <tbody> <tr ng-repeat="row in ::tableaux"> <td ng-repeat="column in ::ColumnTable" ng-init="colonne = column.Id">{{::row[colonne]}}</td> </tr> </tbody> </table> </ion-scroll>
0
source

How do you upload your data?

If you do $scope.ColumnTable.push(newData); then this is not the right way to do this.

What am I doing:

  • create a service that loads the temporary table: call it myService.setTable() .

  • Tell the controller the event: this service dispatches the $rootScope.$broadCast("myService.setTable-refresh") event $rootScope.$broadCast("myService.setTable-refresh")

  • Put the event in your controller and refresh the table: $scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});

  • Update your HTML to work with myWorkingTable

In addition, you must define a unique key in ng-repeat to optimize the performance used by track by to prevent the restoration of already created content.

See explanation here: http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

0
source

More articles:


All Articles