Question

我试图为表格提供一个分页：
我们假设有100条记录，每页记录为10。如果我在第3页，则应在表格中准备21到30的记录。

所以我尝试使用angular filter过滤这些记录，但无法成功。我尝试了多种方式：

<tr on-last-repeat ng-repeat="record in data | filter:( $index>= fromRow && $index <= toRow)" role="row">
创建了自定义过滤器，但无法将$index或记录传递给filter。如果记录可以传递给过滤器，那么我可以通过records.indexOf(record)得到索引。

尝试传递$index：

<tr on-last-repeat ng-repeat="record in data | paging:$index:fromRow:toRow track by $index" role="row">

我在StackOverflow中找到了一个名为native filter的解决方案：

<tr on-last-repeat ng-repeat="record in data | filter:filterPaging()" role="row">

$scope.filterPaging = function(){
    return function(record){
        var idx = $scope.data.indexOf(record)+1;
        if(idx >= $scope.fromRow && idx <= $scope.toRow) return true;
        return false;
    }
};

但这个功能被调用了很多次。我的表有4列和10个记录，该函数被调用了40次。如果有数千条记录，我对性能表示担忧。

有人可以花几分钟时间看看这个。

Answer 1

内置的limitTo过滤器完全符合您的要求。

顺便说一下，在我们的项目中，我们总是最终在控制器（或自定义指令）中按需过滤数组，以便ngRepeat不必使用任何过滤器。

Answer 2

为什么不将所有数据存储在数组中，然后仅在fromRow或toRow更改时对其进行过滤？

var fullData = $scope.data;
$scope.$watch('fromRow', function(){
        // frowRow minus 1 to get the index
        $scope.data = fullData.splice(fromRow - 1, toRow);
});

angularJs过滤ng-repeat

2 个答案: