如何从分页指令angularjs隐藏直接页面链接

how to hide direct page links from Pagination Directive angularjs?

本文关键字：链接 隐藏 angularjs 分页 指令      更新时间：2023-09-26

我正在使用此分页指令

https://github.com/michaelbromley/angularUtils/blob/master/src/directives/pagination/README.md

我想隐藏直接页面链接（1,2,3）只需要下一个和上一个如何做到？我正在使用此代码

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

<div ng-controller="OtherController" class="other-controller">
          <small>this is in "OtherController"</small>
          <div class="text-center">
          <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="dirPagination.tpl.html"></dir-pagination-controls>
          </div>
        </div>

您可以使用专门为此目的定义的uib寻呼机指令。此指令支持uib分页指令的所有属性。

<uib-pager total-items="totalItems" ng-model="currentPage" align=false></uib-pager>

请参阅文档

下面是一个自定义模板的示例，它使用范围值以及"上一个"answers"下一个"箭头链接，但没有页面链接：

<div class="range-label">Displaying {{ range.lower }} - {{ range.upper }} of {{ range.total }}</div>
<a href="" title="Previous page" ng-class="{ disabled : pagination.current == 1 }" ng-click="setCurrent(pagination.current - 1)">&lsaquo;</a>
<a href="" title="Next page"  ng-class="{ disabled : pagination.current == pagination.last }" ng-click="setCurrent(pagination.current + 1)">&rsaquo;</a>

查看链接了解更多详细信息。https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination#writing-a-自定义分页控制-模板

转到dirPagination.tpl.html并删除此行：

<li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }">
    <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>
</li>

这样你现在只能看到箭头了。

相关文章：