加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读