ng-repeat over 11k rows crashing

Question

Я пытаюсь сделать таблицу (с большим количеством данных) с помощью Angular, таблица уже выполнена с PHP, но для добавления фильтра проще использовать Angular. PHP занимает 10 секунд, чтобы нарисовать всю таблицу из 11k строк, но Angular продолжает работать и дальше, даже Firefox говорит мне, что скрипт не имеет никакого значения. Если я нажимаю кнопку «Продолжить», сообщение отображается снова, если я нажимаю «Отменить», страница ничего не делает, если я нажимаю кнопку «Отладка», она продолжает работать, но ничего не отображается.

Сначала я думал, что рисование + 11k строк в HTML с ng-repeat было слишком много, и это вызывало проблему, поэтому я добавил 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 в нг-повтор так:

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