Angularjs 带搜索（筛选器）框的角度延迟加载列表
我有一个列表，我正在懒洋洋地加载-一次只有10个项目。当用户滚动到底部时，会加载另外10个，等等。但是，我也希望有一个选项，可以在完整列表中搜索项目，而不是惰性列表。我的列表存在于客户端，但有900多个项目，渲染需要很长时间。如何使我的列表保持惰性显示，但让搜索框从我的完整列表中筛选项目 *我希望使用ng-change（）创建自定义搜索不是我唯一的选择 这是一个小plnkr。信件列表是我想要搜索的完整列表。而cachedLetters就是列表中呈现的内容 HTMLAngularjs 带搜索（筛选器）框的角度延迟加载列表,angularjs,lazy-loading,Angularjs,Lazy Loading,我有一个列表，我正在懒洋洋地加载-一次只有10个项目。当用户滚动到底部时，会加载另外10个，等等。但是，我也希望有一个选项，可以在完整列表中搜索项目，而不是惰性列表。我的列表存在于客户端，但有900多个项目，渲染需要很长时间。如何使我的列表保持惰性显示，但让搜索框从我的完整列表中筛选项目 *我希望使用ng-change（）创建自定义搜索不是我唯一的选择 这是一个小plnkr。信件列表是我想要搜索的完整列表。而cachedLetters就是列表中呈现的内容 HTML 我想出了一个解决办法。不确定
我想出了一个解决办法。不确定是否有更好的解决方案
您认为在不使用$scope的情况下实现这一点有什么方法吗？我正在使用新的角度路由器，它不会让我使用$scope，我真的很想实现这一点！您也许可以将函数指针传递给该指令。然后不使用scope.$apply，只需调用传入的函数即可
<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>
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()')
}
})
}
}
})
see plnkr for solution