如何使用Smart-Table提高ng-repeat性能

Question

我有一个性能问题，我找不到解决方案。

上下文:我需要在一个表中显示大量数据(500行，8列)。为了显示这些数据，我选择使用Smart-table，因为它提供了良好的功能，但问题是我有很多数据，显示数据的时间很长(5 - 9秒，这取决于设备性能)。

重要的是:我需要显示所有的数据，所以我不需要分页方法，限制过滤器。

所以这段代码是有效的:

    <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>

我读到Ionic做了一个指令(collection-repeat)，它允许应用程序比ng-repeat更高效地显示庞大的项目列表。所以我试着用收集-重复来重制我的解决方案，但这不起作用…

代码收集-重复解决方案:

<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>

错误:超过最大调用堆栈大小

问题:对于数据量大的smart-table，有没有angularjs或者ionic的解决方案来提高性能?我的集合怎么了?

Answer 1

你用的是哪个版本的Ionic ?如果你使用的是1.0 beta 14或更高版本，请使用bind一次(Angular 1.3自带)

就像这样。

<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>

Answer 2

你是如何加载数据的

如果你正在做一个$scope.ColumnTable.push(newData);，那么这不是一个正确的方法。

我所做的是:

• 创建一个加载临时表的服务:我们叫它myService.setTable()。

• 通知你的控制器一个事件:这个服务发送一个事件$rootScope.$broadCast("myService.setTable-refresh")

• 将事件捕获到控制器&更新表:$scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});

• 更新你的HTML以使用myWorkingTable

此外，您应该在ng-repeat中定义一个唯一的键，用于track by使用的性能优化，以防止重建已经创建的内容。

请看这里的解释:http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm