angularjs – 如何使用Smart-Table增加ng-repeat性能?
发布时间:2020-12-17 18:04:16 所属栏目:安全 来源:网络整理
导读:我有性能问题,我找不到解决方案. 上下文:我需要在表中显示大量数据(500行,8列).为了显示这些数据我选择使用Smart-table,因为它提供了很好的功能,但问题是我有很多数据,显示数据的时间很长(5-9秒,这取决于设备性能). 重要的是:我需要显示所有数据,所以我不
我有性能问题,我找不到解决方案.
上下文:我需要在表中显示大量数据(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?如果您使用的是版本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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |