Angularjs 角度分页反向跳转

我有这张桌子：

以下是代码和：

HTML

<table class="table table-striped table-condensed table-hover">
    <thead>
        <tr>
            <th class="id">Id&nbsp;<a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
            <th class="name">Name&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
            <th class="description">Description&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
            <th class="field3">Field 3&nbsp;<a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
            <th class="field4">Field 4&nbsp;<a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
            <th class="field5">Field 5&nbsp;<a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>
        </tr>
    </thead>
    <tfoot>
        <td colspan="6">
            <div class="pagination pull-right">
                <ul>
                    <li ng-class="{disabled: currentPage == 0}">
                        <a href ng-click="prevPage()">« Prev</a>
                    </li>

                    <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
                        ng-class="{active: n == currentPage}"
                    ng-click="setPage()">
                        <a href ng-bind="n + 1">1</a>
                    </li>

                    <li ng-class="{disabled: (currentPage) == pagedItems.length - 1}">
                        <a href ng-click="nextPage()">Next »</a>
                    </li>
                </ul>
            </div>
        </td>
    </tfoot>
    <pre>pagedItems.length: {{pagedItems.length|json}}</pre>
    <pre>currentPage: {{currentPage|json}}</pre>
    <tbody>
        <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
            <td>{{item.field3}}</td>
            <td>{{item.field4}}</td>
            <td>{{item.field5}}</td>
        </tr>
    </tbody>
</table>

身份证件






pagedItems.length:{{pagedItems.length | json}
currentPage:{{currentPage | json}}
{{item.id}
{{item.name}
{{item.description}
{{item.field3}}
{{item.field4}
{{item.field5}}

JS

<li ng-repeat="n in range(pagedItems.length, currentPage - left_gap, currentPage + right_gap) ">

函数ctrlRead（$scope，$filter）{
//初始化
$scope.sortingOrder='name'；
$scope.gap=5；
$scope.cached=0；
$scope.reverse=false；
$scope.filteredItems=[]；
$scope.groupedItems=[]；
$scope.itemsPerPage=5；
$scope.pagedItems=[]；
$scope.currentPage=0；
$scope.items=[
{“id”：1，“name”：“name 1”，“description”：“description 1”，“field3”：“field3 1”，“field4”：“field4 1”，“field5”：“field5 1”}，
{“id”：2，“name”：“name 2”，“description”：“description 1”，“field3”：“field3 2”，“field4”：“field4 2”，“field5”：“field5 2”}，
//....
];
var searchMatch=函数（草堆、针）{
如果（！针）{
返回true；
}
返回haystack.toLowerCase（）.indexOf（needle.toLowerCase（））！=-1；
};
//初始化筛选的项目
$scope.search=函数（）{
$scope.filteredItems=$filter（'filter'）（$scope.items，函数（item）{
对于（项目中的var attr）{
if（searchMatch（项[attr]，$scope.query））
返回true；
}
返回false；
});
//注意分拣顺序
如果（$scope.sortingOrder！=''）{
$scope.filteredItems=$filter（'orderBy'）（$scope.filteredItems，$scope.sortingOrder，$scope.reverse）；
}
$scope.currentPage=0；
//现在按页面分组
$scope.groupToPages（）；
};
//计算页面位置
$scope.groupToPages=函数（）{
$scope.pagedItems=[]；
对于（变量i=0；i<$scope.filteredItems.length；i++）{
如果（i%$scope.itemsPerPage==0）{
$scope.pagedItems[Math.floor（i/$scope.itemsPerPage）]=[$scope.filteredItems[i]]；
}否则{
$scope.pagedItems[Math.floor（i/$scope.itemsPerPage）].push（$scope.filteredItems[i]）；
}
}
};
$scope.range=函数（大小、开始、结束）{
如果（$scope.cached==start）{
开始=开始-4；
console.log（'start'，start）；
}
$scope.cached=start；
var-ret=[]；
日志（大小、开始、结束）；
if（size<2）{return ret；}
如果（大小<结束）{
结束=大小；
开始=大小-$scope.gap；
}
对于（变量i=开始；i<结束；i++）{
如果（i 0）{
$scope.currentPage--；
}
};
$scope.nextPage=函数（）{
如果（$scope.currentPage<$scope.pagedItems.length-1）{
$scope.currentPage++；
}
};
$scope.setPage=函数（）{
$scope.currentPage=this.n；
};
//函数描述了用于显示的数据处理
$scope.search（）；
//更改排序顺序
$scope.sort_by=函数（newSortingOrder）{
如果（$scope.sortingOrder==newSortingOrder）
$scope.reverse=！$scope.reverse；
$scope.sortingOrder=newSortingOrder；
};
};
ctrlRead.$inject=['$scope'，'$filter']；

从代码中可以看到，我们有13组5行

如果我在5上按“分页”，则

5

按钮跳到第一位，最后一位是

9

通过这种方式，我可以快速“浏览”所有数据

我的问题是，我不知道如何使它工作跳回a.e逆转

例如，如果我停留在13：

我按下

9

我希望

9

将跳转到分页的末尾，列表中的第一个元素将是

5

如何做到这一点

---

谢谢，

一般来说，您需要将当前页面索引和页面导航链接的索引分离。但是有很多方法可以做到这一点。我通过在您创建的范围中添加一个左右间距来实现这一点，这样可以更好地控制快速导航按钮的索引。因此，当您调用

设置页面

I只需添加一点检查：

if（这个.n
if (this.n <= $scope.currentPage) {
    $scope.left_gap = $scope.gap-1;
    $scope.right_gap = 1;
} else {            
    $scope.left_gap = 0;
    $scope.right_gap = $scope.gap;
}

<li ng-repeat="n in range(pagedItems.length, currentPage - left_gap, currentPage + right_gap) ">