node.js - 在 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

由于这里有几个人遇到了类似的问题，而我自己也在苦苦挣扎，所以我花时间创建了一个适用于我的案例的 fiddle 。

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;
    }
};