Question

我是分页新手，我找到了this指令，这个指令在我读过的Angular JS中备受追捧。我正在尝试使用我创建的自定义分页html / css布局来实现分页。

分页略有效，因为页面数量正确显示，并且显示的项目数量正如我指定的那样正确。然而问题是点击例如分页列表中的第2页没有加载下一个5项的列表。它只是停留在同一个列表中。

我对如何正确使用该指令的所有部分感到有点困惑，所以我相信我在实现这个指令时做错了。

我找到的指南here与上面的存储库相同。

下载文件并添加到项目中：

dirPagination.js

我的HTML如下：

<div id="pages" ng-if="1 < pages.length || !autoHide">
  <span ng-class="{ active : pagination.current == pageNumber,
      disabled : pageNumber == '...' }" class="pagenumber" 
      dir-paginate="pageID in controller.list| filter:q | itemsPerPage:
      controller.pageCount" current-page="controller.currentPage">
    <a href="" ng-click="setCurrent(pageID)">{{ pageID.id }}</a>
  </span>
</div>

<div class="myResults" dir-paginate="results 
  in controller.list| filter:q | itemsPerPage: 5" current-page="1">
    <div class="listFigures">
        <figure class="imageList">
            <img ng-src="{{results.image}}" ng-alt=
              {{results.imageAlt}}" ng-title=
              {{results.imageTitle}}" />
        </figure>
    </div>
</div>

在我的控制器中，我根据项目数量设置了pageCount（它被用作参数，并且用于显示现在有多少页面）：

vm.pageCount=2;
vm.currentPage = 1;

工作：

显示页面列表，按照上面的代码，您将看到它是8页。
只显示5个项目

无效：

点击其他页面（在本例中为2）不会将我带到另一页数据。该列表不会刷新。单击另一个页码将保持显示的5个项目的相同列表。总共有8个项目，其中5个显示，点击第2页面编号应显示最后3个。

研究的帖子：

如果我的实现完全关闭，我对如何使其工作感到困惑。我已经阅读了一些帖子以及尝试按照存储库中的指南操作但是我不了解如何正确使用它。我有兴趣了解如何使用自定义html/css实现此分页指令而不使用dirPagination.tpl.html template。

按照最佳做法，您可以阅读标准Angular的here。

Answer 1

您最后在指令中对当前页面进行了硬编码：

<div class="myResults" dir-paginate="results in controller.list| filter:q | itemsPerPage: 5" current-page="1">

要使其正常工作，您需要将其设置为保存当前页面的变量。您可以将代码与第42行的分页指令http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview提供的plunker进行比较。

Answer 2

在Plunker找到here的代码以及下载指令dirPagination.tpl.html后附带的模板之后，我发现如何成功利用该代码而不使用模板。你不能跳过任何东西。必须使用列表必须使用与dirPagination.js一起使用的模板提供的大多数标记。

这是工作解决方案。只有需要更改的内容才是html：

<div class="results">
  <dir-pagination-controls  on-page-change="pageChangeHandler(newPageNumber)">
  </dir-pagination-controls>

  <div class="pages" ng-if="1 < pages.length || !autoHide"
      class="pagenumber pagination" dir-paginate="pageID in
      controller.list| filter:q | itemsPerPage:5"
      ng-class="{ active : pagination.current == pageNumber, disabled :
      pageNumber == '...' }">
    <ul class="pagination" ng-if="1 < pages.length || !autoHide">
      <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>
    </ul>
  </div>
</div>

随意复制文件中的所有html并使用我制作的课程：

结果
页
分页

根据需要更改CSS。

注意：分页类无法删除，即使您在浏览器上运行页面时检查元素，如果您将其从html中删除，您将看到它被自动放回

临时说明：当我弄清楚如何显示上述标签中的页数（例如h1）时，我会将其添加到我的答案中。

Angular JS：在不使用Pagination.tpl.html模板的情况下使用分页指令JS进行分页

2 个答案: