在AngularJS中过滤无限滚动的页面

Question

我在 AngularJS + Node.js 应用程序上实现了无限滚动功能。

它基于这个 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 个结果及其相应的图像。

但是，当使用 AngularJS 过滤器在结果中搜索时，我遇到了问题，因为当然不是所有的结果都在那里（除非用户滚动到最底部），所以搜索只会返回所需结果的一小部分.

然后我删除了无限滚动功能以使搜索功能正常工作，但这在我打开页面时在 chrome 上（不是在 Firefox 上）提供了新问题，浏览器开始从顶部加载图像。如果我然后通过搜索以“z”开头的内容（在结果的最底部）来过滤结果，Firefox 会切换焦点并首先加载以“z”开头的结果（因为它们是唯一显示的结果）。然而，chrome 会继续通过列表加载，因此用户只有在加载应用中的所有图像后才能看到他们的搜索结果（对于“z”）。

我正在寻找一种方法，让 angular 同时提供无限滚动和适当的搜索过滤器结果。如果这是不可能的，那么一种方法可以让 chrome 首先加载可见图像。

我目前正在尝试一些奇怪的东西，范围内有一堆不同的数组，但到目前为止我还没有运气。

Answer 1

由于这里有几个人遇到了类似的问题，而我自己也在苦苦挣扎，所以我花时间创建了一个可行的小提琴（针对我的情况）。

https://jsfiddle.net/lisapfisterer/Lu4sbxps/

主要思想是使用无限滚动的函数调用动态扩展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;
    }
};

Answer 2

你想做的不是“不可能”，但肯定会有点复杂。

• 让您的服务器执行所有“过滤”以确保返回的分页值是过滤器的正确值。
• 当服务器返回结果时，将所有的 HTML 渲染到屏幕上除了图像标签的 src 属性。这样一来，任何图像都不会开始加载。
• 滚动到正确的“页面”。
• 确保加载图像之前的所有高度都相同，现在执行一些 JS 魔术来确定哪些是可见的。
• 仅设置可见图像的 src 属性，订阅其“加载”事件并创建一个 $q 承诺，一旦所有加载完成，该承诺即完成。
• 该承诺完成后，设置其余图像 src 属性，以便加载其余图像。