在AngularJS中用无限滚动过滤页面
我在我的AngularJS + Node.js应用程序上实现了无限的滚动function。
它基于这个JSfiddle，并以相同的方式工作： http : //jsfiddle.net/vojtajina/U7Bz9/ HTML：
<div id="fixed" when-scrolled="loadMore()"> <ul> <li ng-repeat="i in items">{{i.id}}</li> </ul> </div> 使用Javascript：
function Main($scope) { $scope.items = []; var counter = 0; $scope.loadMore = function() { for (var i = 0; i < 5; i++) { $scope.items.push({id: counter}); counter += 10; } }; $scope.loadMore(); } angular.module('scroll', []).directive('whenScrolled', function() { return function(scope, elm, attr) { var raw = elm[0]; elm.bind('scroll', function() { if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { scope.$apply(attr.whenScrolled); } }); }; });
我实现无限滚动的原因是为了节省我的用户带宽，不加载所有1000个结果及其相应的图像，除非用户想要看到所有的结果。
然而，当使用AngularJSfilter在结果中search时，我遇到了问题，因为当然不是所有的结果都存在（除非用户已经滚动到底部），所以search将只返回所需结果的一小部分。
然后，我删除了无限滚动function，以使searchfunction正常工作，但是当我打开页面浏览器开始从顶部加载图像时，这提供了铬（但不是在Firefox上）的新问题。 如果我通过search以“z”开头的结果（在结果的最底部）来过滤search结果，则Firefox开关将首先聚焦并加载以“z”开头的结果（因为它们是唯一被显示的结果）。 然而，chrome继续通过列表加载，因此，一旦应用程序中的所有图像都被加载，用户将只能看到search结果（对于“z”）。
我正在寻找一种方法来提供无限的滚动和一个适当的search结果在同一时间filter。 如果这是不可能的，那么一种方法使铬加载可见的图像第一。
我目前正在尝试一些奇怪的东西与范围内的一堆不同的数组，但我迄今没有任何运气。
由于这里有几个人有类似的问题，我正在挣扎，我花了一些时间来创造一个小提琴（对我来说）。
https://jsfiddle.net/lisapfisterer/Lu4sbxps/
主要思想是使用无限滚动的函数调用dynamic扩展limitTo值
<div infinite-scroll="loadMore()" infinite-scroll-distance="20"> <tr data-ng-repeat="logEvent in logEventFilter = (logEvents | filter:searchTerm | limitTo:numberToDisplay) track by $index"> <td> {{$index}} </td> <td> {{logEvent.name}} </td> <td> {{numberToDisplay}} </td> </tr> </div>
loadMore只是增加了限制
$scope.loadMore = function() { if ($scope.numberToDisplay + 5 < $scope.logEvents.length) { $scope.numberToDisplay += 5; } else { $scope.numberToDisplay = $scope.logEvents.length; } };
你想要做的不是“不可能”，但肯定会有点复杂。
- 请让服务器执行所有“过滤”，以确保返回的分页值是filter的正确值。
- 当服务器返回结果时， 除了图像标签的src属性之外 ，将所有的HTML渲染到屏幕上。 这样，没有图像将开始加载。
- 滚动到正确的“页面”。
- 确保加载的图像之前的所有高度都是相同的，现在做一些JS魔法来确定哪些是可见的。
- 仅设置可见映像的src属性，订阅其“加载”事件并创build一个完成所有加载完成的$ q承诺。
- 在承诺完成之后，设置图像src属性的其余部分，以便加载其余的图像。