AngularJS - 过滤器不适用于尚未滚动到的数据答案

【问题标题】：AngularJS - Filter not working on data that hasnt been scrolled toAngularJS - 过滤器不适用于尚未滚动到的数据
【发布时间】：2015-05-12 00:54:04
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat angular-filters

【解决方案1】：

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

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

【讨论】：