在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").

我正在寻找一种方法,让角度同时为结果提供无限滚动和适当的搜索过滤器.如果这是不可能的,那么首先使铬加载可见图像的方法.

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

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

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

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