如何使用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 made a directive (collection-repeat)，它允许应用程序比ng-repeat更好地显示巨大的项目列表。所以我试着用collection-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>

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

问:有没有什么角度或离子解决方案来提高有大量数据的智能表的性能？我的收藏有什么问题-重复一遍？

Answer 1

您使用的是什么版本的Ionic？如果您使用的是1.0测试版14或更高版本，请使用bind once ( 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);，那么这不是一个正确的方法。

我所做的是：

创建一个加载临时表的服务:让我们称它为使用事件更新您的控制器:此服务将事件发送到您的控制器和更新表中：$scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});

• Update您的
• 以使用myWorkingTable

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

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