Question

我试图用Angular做一个表（包含大量数据），该表已经用PHP完成，但使用Angular添加过滤器更容易。 PHP需要10秒才能绘制出11k行的整个表格，但是Angular一直在继续，甚至Firefox告诉我脚本没有得到解答。如果我单击“继续”，则会再次显示该消息，如果单击“取消”，则该页面不执行任何操作，如果按“调试”，则会继续运行，但不会显示任何内容。

起初，我认为在HTML中使用ng-repeat绘制+ 11k行太多而导致问题，所以我添加了limitTo（50）并添加了无限滚动div。但它仍然没有显示任何内容并继续加载。

以下是一些代码：

<div ng-app='mainApp'>
    <div ng-init='values=[".$angularString."]' ng-controller='seeTickets as tickets'>
        <div infinite-scroll='tickets.loadMore()' infinite-scroll-distance='1'>
            Filtro: <input type='text' ng-model='globalSearch.$'/><br><br>
            <script type='text/javascript'>
                var app = angular.module('mainApp', []);

                    app.controller('seeTickets', function(){
                        this.totalDisplayed = 50;

                        this.loadMore = function(){
                            this.totalDisplayed += 50;
                        }
                    });
            </script>
            <table>
                <tr ng-repeat="value in values | filter:globalSearch | limitTo:tickets.totalDisplayed">
                    <td> {{value.id_ticket}} </td>
                    <td> {{value.ticket_date}} </td>
                    <td> {{value.ticket_subject}} </td>
                    <td> {{value.ticket_from}} </td>
                    <td> {{value.ticket_to}} </td>
                    <td> {{value.ticket_priority}} </td>
                </tr>
            </table>
        </div>
    </div>
</div>

我做错了吗？有办法解决这个问题吗？即使我设置了limitTo，为什么还要继续加载？

Answer 1

将track by $index添加到 ng-repeat ，如下所示：

 <tr ng-repeat="value in values | filter:globalSearch | limitTo:tickets.totalDisplayed track by $index">
     ...
 </tr>

ng-repeat超过11k行崩溃

1 个答案: