带有搜索（过滤器）框的角度延迟加载列表

Question

我有一个我正在延迟加载的列表 - 一次只能加载 10 个项目。当用户滚动到底部时，另外 10 个被加载等等。但是我也希望有一个在完整列表中搜索项目的选项 - 而不是惰性列表。我的列表存在于客户端，但包含 900 多个项目并且渲染需要很长时间。我怎样才能让我的列表懒惰地显示，但让搜索框从我的完整列表中过滤项目。

*我希望使用 ng-change() 创建自定义搜索不是我唯一的选择

这是一个小 plnkr。字母列表是我想要搜索的完整列表。而 cachedLetters 就是列表中呈现的内容

http://plnkr.co/edit/8tyLuo4nSTz1q0Z7DilV?p=preview

HTML

<body ng-app="app" ng-controller="Ctrl">
  <div class="container" style="padding-top:40px">
    <input class="form-control" ng-model="search" style="margin-bottom: 15px">


    <ul class="list-group" style="height: 200px; overflow-y: auto" lazy-load>
      <li class="list-group-item" ng-repeat="letter in cachedLetters | filter: {'name': search}"> {{ letter.name }}</li>
    </ul>
  </div>
</body>

角度 var app = angular.module('app', [])

app.controller('Ctrl', function($scope) {

  $scope.letters = [{
    name: 'A'
  }, {
    name: 'B'
  }, {
    name: 'C'
  }, {
    name: 'D'
  }, {
    name: 'E'
  }, {
    name: 'F'
  }, {
    name: 'G'
  }, {
    name: 'H'
  }, {
    name: 'I'
  }, {
    name: 'J'
  }, {
    name: 'K'
  }, {
    name: 'L'
  }, {
    name: 'M'
  }, {
    name: 'N'
  }, {
    name: 'O'
  }, {
    name: 'P'
  }, {
    name: 'Q'
  }, {
    name: 'R'
  }, {
    name: 'S'
  }, {
    name: 'T'
  }, {
    name: 'U'
  }, {
    name: 'V'
  }, {
    name: 'W'
  }, {
    name: 'X'
  }, {
    name: 'Y'
  }, {
    name: 'Z'
  }, ]

  var ind = 0

  $scope.cachedLetters = $scope.letters.slice(0, 10)

  $scope.loadMore = function() {
    ind = ind + 10
    var r = 10
    if (ind + 10 > $scope.letters.length) {
      r = $scope.letters.length - ind
    }
    console.log("Loading")
    $scope.cachedLetters = $scope.cachedLetters.concat($scope.letters.slice(ind, r + ind))
    }

  })

app.directive('lazyLoad', function() {
  return {
    restrict: 'A',
    link: function(scope, elem) {
      var scroller = elem[0]
      $(scroller).bind('scroll', function() {
        if (scroller.scrollTop + scroller.offsetHeight >= scroller.scrollHeight) {
          scope.$apply('loadMore()')
        }
      })
    }
  }
})

Answer 1

这是我想出的解决方案。不知道有没有更好的解决方案。

http://plnkr.co/edit/seshxi?p=preview

see plnkr for solution