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

Question

I have 2 angular UI bootstrap pagination on the same page but my second pagination is not working properly.

My first pagination initialization is:

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

Here i have set value for page_size as ng-init="page_size=50" on one of the parent DIV .

My table tr is :

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

My second pagination initialization is:

<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>

Here i have set value for page_size_main as ng-init="page_size_main=50" on one of the parent DIV .

My table tr is :

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

Now the strange thing my first table has 14 record and first pagination is working properly. But for the second table, pagination is creating properly as per data length but the table is showing all records. So for the second, there is 58 record so as per page size 50, 2 page is creating but the table is showing all 58 records and pagination link is not working for the second table.

One more thing if I set first table's page size to 10 then second table's data is filtered to 10 but still pagination is not working for the second table. It's strange and I'm not getting the solution from anywhere.

Can someone help me, please?

Downvoters give the reason so that I can improve my question.

Answer 1

I got the solution to my problem. This may help someone so I am posting my own answer. I have wrapped my second table pagination with parent div containing ng-if wrapper.

<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>

This causes my ng-change not to fire twice as by the time the pagination is loaded my model item page has a value, hope this helps someone else.

So simply replace ng-if with ng-show and everything should be working fine.