同一页面上的两个角度 ui 引导分页不起作用

Question

我在同一页面上有 2 个 Angular UI 引导分页，但我的第二个分页无法正常工作。

我的第一个分页初始化是：

<ul uib-pagination total-items="list_details.length" max-size="4" items-per-page="page_size" ng-model="current_page" ng-change="pageChanged()"> </ul>

在这里，我在父级DIV 之一上将 page_size 的值设置为 ng-init="page_size=50"。

我的表tr 是：

<tr ng-repeat="cl in list_details | limitTo: page_size:(current_page-1)*page_size"></tr>

我的第二个分页初始化是：

<ul uib-pagination total-items="main_details.length" max-size="4" items-per-page="page_size_main" ng-model="current_page_main" ng-change="pageChanged()"></ul>

在这里，我在父级DIV 之一上将 page_size_main 的值设置为 ng-init="page_size_main=50"。

我的表tr 是：

<tr ng-repeat="em in main_details | limitTo: page_size_main:(current_page_main-1)*page_size_main"></tr>

现在奇怪的是我的第一个表有 14 条记录并且第一个分页工作正常。但是对于第二个表，分页根据数据长度正确创建，但表显示所有记录。因此，对于第二个，有 58 条记录，因此根据页面大小 50，正在创建 2 个页面，但该表显示所有 58 条记录，并且分页链接不适用于第二个表。

如果我将第一个表的页面大小设置为 10，那么第二个表的数据将被过滤为 10，但分页仍然不适用于第二个表。这很奇怪，我没有从任何地方得到解决方案。

有人可以帮帮我吗？

投反对票的人给出原因，以便我改进我的问题。

Answer 1

我找到了解决问题的方法。这可能对某人有所帮助，所以我发布了我自己的答案。我已经用包含 ng-if 包装器的父 div 包装了我的第二个表格分页。

<div ng-if="...some condition...">
      <ul uib-pagination total-items="main_details.length" max-size="4" items-per-page="page_size_main" ng-model="current_page_main" ng-change="pageChanged()"></ul></pagination>
</div>

这导致我的 ng-change 在加载分页时不会触发两次，我的模型项目页面有一个值，希望这对其他人有帮助。

所以只需将ng-if 替换为ng-show，一切都会正常工作。