Итак, я пытаюсь создать бесконечную таблицу прокрутки с помощью AngularJS, похожей на это: http://jsfiddle.net/vojtajina/U7Bz9/
Проблема, с которой я столкнулась, заключается в том, что в примере jsfiddle, если я продолжаю прокручивать до тех пор, пока у меня не будет миллиона результатов, браузер будет замедлять сканирование, не так ли? Потому что теперь будет 1,000,000 результат в $scope.items. Было бы лучше, если бы я когда-либо имел, например, 1000 результаты за один раз внутри $scope.items, а результаты, которые я просматривал, оказались в пределах 1000.
Пример использования: загрузка страницы, и я вижу первые 10 результаты (из 1,000,000). Хотя я вижу только 10, первые 1000 результаты фактически загружаются. Затем я прокручиваю до самого нижнего края списка, чтобы увидеть последние элементы 10. Если я снова вернусь к вершине, я ожидаю, что верхние 10 результаты будут снова загружены с сервера.
У меня есть проект, который я сделал с ExtJS, что аналогичная ситуация: бесконечный список прокрутки с несколькими тысячами результатов в нем. Способ ExtJS справиться с этим состоял в том, чтобы загрузить текущую страницу результатов, а затем предварительно загрузить несколько дополнительных страниц результатов. Однако в любой момент времени были только 10 страницы результатов, хранящихся локально.
Итак, я думаю, мой вопрос в том, как я могу реализовать это в AngularJS? Я знаю, что я не предоставил много кода, поэтому я не ожидаю, что люди просто дадут закодированный ответ, но, по крайней мере, некоторые советы, в каком направлении идти.
Итак, получается, что модуль ng-grid для AngularJS имеет в точности то, что мне нужно. Если вы посмотрите на страницу примеров , пример обработки на стороне сервера также представляет собой бесконечный список прокрутки, который загружает только нужные данные.
Спасибо тем, кто все равно прокомментировал и ответил.
Последний URL: ng-grid
Несколько вещей:
"Бесконечная прокрутка" до "1 000 000" строк, вероятно, будет иметь проблемы независимо от структуры, только потому, что вы создали миллионы и миллионы узлов DOM (предположим, что в каждой записи имеется более одного элемента)
Реализация, которую вы пытаетесь сделать с помощью <li ng-repeat="item in items">{{item.foo}}</li> или что-то в этом роде, будет иметь проблемы очень быстро по одной большой причине: {{item.foo}}} или любой такой ngBind будет устанавливать $watch в этом поле, что создает много накладных расходов в виде ссылок на функции и т.д. Таким образом, хотя 10 000 небольших объектов в "массиве" не будут такими уж плохими... 10 000-20 000 дополнительных ссылок на функции для каждого из этих 10 000 элементов будут быть.
То, что вы хотели бы сделать в этом случае, - это создать директиву, которая обрабатывает добавление и удаление элементов DOM, которые "слишком далеки" вне поля зрения, а также сохраняя данные в актуальном состоянии. Это должно уменьшить большинство проблем с производительностью, которые могут возникнуть.
... хорошая бесконечная прокрутка не проста, мне жаль, что я говорю.
Я наткнулся на эту nginfinitescroll вещь и, похоже, делает именно то, что вы ищете. Пример удаленных данных, который показывает, что данные в реальном времени от Reddit работают очень хорошо.
Мне нравится реализация angular -ui ui-scroll...
https://github.com/angular-ui/ui-scroll
... над ngInfiniteScroll. Основное отличие от ui-scroll от стандартного бесконечного прокрутки состоит в том, что предыдущие элементы удаляются при выходе из окна просмотра.
Из их readme...
Обычный способ представления пользователю списка элементов данных длины undefined состоит в том, чтобы начать с небольшой части в верхней части списка - достаточно, чтобы заполнить пробел на странице. Дополнительные строки добавляются в нижнюю часть списка, когда пользователь прокручивает список вниз.
Проблема с этим подходом состоит в том, что даже если строки в верхней части списка становятся невидимыми, поскольку они прокручиваются из представления, они все еще являются частью страницы и все еще потребляют ресурсы. По мере того, как пользователь прокручивается вниз, список растет, и веб-приложение замедляется.
Это становится реальной проблемой, если html, представляющий строку, содержит обработчики событий и/или angular наблюдателей. Веб-приложение средней сложности может легко ввести 20 наблюдателей за строку. Что для списка из 100 строк дает вам всего 2000 наблюдателей и вялое приложение.
Кроме того, активно прокрутка ui-scroll.
Кажется, что http://kamilkp.github.io/angular-vs-repeat будет тем, что вы ищете. Это виртуальная директива прокрутки.
Вы можете попробовать использовать ng-infin-scroll:
Отъезд virtualRepeat из Angular Материал
Он реализует динамическое повторное использование строк, видимых в области области просмотра, так же, как ui-scroll