Question

我遇到了性能问题，但我找不到解决方案。

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

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

所以这段代码正在运行：

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

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

问题：是否有任何angularjs或离子解决方案可以提高智能表的性能和大量数据？我的收藏有什么问题 - 重复？

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>

Answer 2

您是如何加载数据的？

如果您正在进行$scope.ColumnTable.push(newData);，那么这不是一种正确的方法。

我的工作是：

创建一个加载临时表的服务：让我们称之为myService.setTable()。
通过事件通知您的控制器：此服务发送事件$rootScope.$broadCast("myService.setTable-refresh")
将事件发送到您的控制器＆amp;更新表：$scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});
更新您的HTML以使用myWorkingTable

此外，您应在ng-repeat中为track by定义一个唯一键，以便class Program { static void Main(string[] args) { Program p = new Program(); p.Run(); } public void Run() { this.Attempt(""); this.Attempt("("); this.Attempt(")"); this.Attempt("()"); this.Attempt("( "); this.Attempt(" )"); this.Attempt("( )"); this.Attempt(" ( "); this.Attempt(" ( ( "); } private void Attempt(string original) { System.Console.WriteLine("'" + original + "' => '" + this.Replace(original) + "'" ); } private string Replace(string original) { string regex = @"(\s*(\)|\()\s*)"; Regex replacer = new Regex(regex); string replaced = replacer.Replace(original, " $2 "); return replaced; }使用，以防止重建已创建的内容。

请参阅此处的说明：http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

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

2 个答案: