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”）。

我正在寻找一种方法，让角度同时为结果提供无限滚动和适当的搜索过滤器。如果无法做到这一点，那么首先让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属性，以便加载剩余的图像。

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

2 个答案: