Question

我有一个使用scroll指令的简单ng-repeat。在加载时，会显示前10个结果，在scoll上显示更多结果。

我看到的问题是，当您在输入中键入值时，过滤的数据似乎是当前显示的数据。

所以在我的plunker示例中：http://plnkr.co/edit/1qR6CucQdsGqYnVvk70A?p=preview

如果您在加载页面后在文本框中键入上一个（不要滚动），则不会显示该数据。但是，如果您滚动到底部，然后键入上一个，则会找到该结果。

HTML：

<div id="fixed" directive-when-scrolled="loadMore()">
  <ul>
    <li ng-repeat="i in items | limitTo: limit | filter: search">{{ i.Title }}</li>
  </ul>
</div>

<br>


<input ng-model="searchText">
<button ng-click="performSearch(searchText)">Submit</button>

JS：

app.controller('MainCtrl', function($scope, $filter) {  

$scope.name = 'World';
  $scope.limit = 5;


  var counter = 0;
  $scope.loadMore = function() {
    $scope.limit += 5;
  };

  $scope.loadMore();

  $scope.performSearch = function(searchText) {
        $scope.filtered = $filter('filter')($scope.items, $scope.search);
    }

    $scope.search = function (item){
        if (!$scope.searchText)
            return true;

        if (item.Title.indexOf($scope.searchText)!=-1 || item.Title.indexOf($scope.searchText)!=-1) {
                return true;
            }
            return false;
    };


});


app.directive("directiveWhenScrolled", function() {
  return function(scope, elm, attr) {
    var raw = elm[0];

    elm.bind('scroll', function() {
      if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
        scope.$apply(attr.directiveWhenScrolled);
      }
    });
  };
});

Answer 1

您需要在之前应用过滤器，以限制结果：

<li ng-repeat="i in items | filter: search | limitTo: limit">{{ i.Title }}</li>

AngularJS - 过滤不处理尚未滚动到的数据

1 个答案: