我正在尝试创建一个交互式照片数据库,用户可以在其中对照片进行排序并按用户过滤,检查他或她感兴趣的多个类别,并按日期,收藏数量等对过滤后的数据进行排序过滤器/排序标准由用户在DOM上选择,并从客户端存储到$scope.model
。用户可见的数据量将通过无限滚动来控制。
我已经创建了此示例的repository和I've deployed it here。我已从以下scroll.controller.js
转载了一些相关代码:
代码
// infinite-scroll logic & collection subscription //
$scope.currentPage = 1;
$scope.perPage = 12;
$scope.orderProperty = '-1';
$scope.query = {};
$scope.images = $scope.$meteorCollection(function() {
query={};
// if filtered by a user...
if ($scope.getReactively('model.shotBy')) {
query.shotBy = $scope.model.shotBy;
};
// if category filter(s) are selected...
if ($scope.getReactively('model.category', true)) {
if ($scope.model.category.length > 0){
var categories = [];
for (var i=0; i < $scope.model.category.length; i++){
categories.push($scope.model.category[i]);
}
query.category = {$in: categories};
}
};
$scope.currentPage = 1; // reset
return Images.find(query, { sort: $scope.getReactively('model.sort')});
});
$meteor.autorun($scope, function() {
if ($scope.getReactively('images')){
$scope.$emit('list:filtered');
}
});
$meteor.autorun($scope, function() {
$scope.$meteorSubscribe('images', {
limit: parseInt($scope.getReactively('perPage'))*parseInt(($scope.getReactively('currentPage'))),
skip: 0,
sort: $scope.getReactively('model.sort')
});
});
$scope.loadMore = function() {
// console.log('loading more');
$scope.currentPage += 1;
};
问题
我可以很好地滚动图像,无限滚动功能似乎有效。但是,当我尝试从DOM中过滤图像时,唯一过滤的结果是在滚动之前最初可见的结果,并且滚动不会使符合条件的其余图像显示,尽管使用$ scope。 $ emit表示ngInfiniteScroll加载更多(documentation)。
编辑:如果初始过滤列表 ,实际上到达底部,滚动将正确追加。只有当初始过滤列表没有到达screem的底部时,它似乎才会附加。
问题
我可以更改什么才能使ngInfiniteScroll在过滤的集合中表现得像我所期望的那样?
任何帮助,想法或建议都会受到赞赏,如果还有其他任何您想看到的内容,请与我们联系。谢谢!
答案 0 :(得分:0)
嗯,几乎整天都需要弄清楚,但我现在在this Github repository有一个工作示例并部署了here。
总而言之,我发现我需要在两个集合和订阅级别进行过滤,以使perPage
正确应用以及用于ngInfiniteScroll功能。另外,我需要通过$scope.$emit
向ngInfiniteScroll发送一个事件,告诉它再次触发,以防图像阵列太小并且没有到达屏幕边缘。如果您有兴趣,请参阅Github存储库以获取更多详细信息。
更新了相关代码
// infinite-scroll logic & collection subscription //
$scope.currentPage = 1;
$scope.perPage = 12;
$scope.query = {};
function getQuery(){
query={};
// if filtered by a user...
if ($scope.getReactively('model.shotBy')) {
query.shotBy = $scope.model.shotBy;
};
// if category filter(s) are selected...
if ($scope.getReactively('model.category', true)) {
if ($scope.model.category.length > 0){
var categories = [];
for (var i=0; i < $scope.model.category.length; i++){
categories.push($scope.model.category[i]);
}
query.category = {$in: categories};
}
};
return query;
}
$meteor.autorun($scope, function(){
$scope.images = $scope.$meteorCollection(function() {
$scope.currentPage = 1; // reset the length of returned images
return Images.find(getQuery(), { sort: $scope.getReactively('model.sort')});
});
$scope.$emit('filtered'); // trigger infinite-scroll to load in case the height is too small
});
$meteor.autorun($scope, function() {
$scope.$meteorSubscribe('images', {
limit: parseInt($scope.getReactively('perPage'))*parseInt(($scope.getReactively('currentPage'))),
skip: 0,
sort: $scope.getReactively('model.sort'),
query: getQuery()
});
});
$scope.loadMore = function() {
// console.log('loading more');
$scope.currentPage += 1;
};
我不确定我是否在这个答案中使用了最佳实践,所以请随时提出建议。