angularjs - 如何使用 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 更高效地显示大量项目列表。所以我试图用 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>

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

问题:是否有任何 angularjs 或 ionic 解决方案来提高具有大量数据的智能表的性能？
我的 collection-repeat 有什么问题？

Answer 1

你用的是什么版本的Ionic？如果您使用的是 1.0 beta 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>