角JS指令dirPagination

Question

我已经创建了一个网格视图(表格列表)使用角JS和添加了dirPagination，它的工作非常好，我还添加了UI启动模式弹出在同一页和弹出有另一个分页。

我的问题是，当模态弹出分页被激活，主页面分页也被模式弹出分页所取代。

下面是截图：

​

​

下面是我的代码：主页：

<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>
    <table class="table table-bordered" >
            <thead>
                <tr>
                    <th at-implicit at-sortable at-attribute="country" at-initial-sorting="asc">Country</th>
                    <th at-implicit at-sortable at-attribute="type">Type</th>
                    <th at-implicit at-sortable at-attribute="plan">Plan Type</th>
                    <th at-implicit at-sortable at-attribute="code">Rate Code</th>
                    <th at-implicit at-sortable at-attribute="rate_plan">Rate Plan</th>

                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="plan in plan_list|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
                    <td>{{plan.COUNTRY_NAME}}</td>
                    <td>Reservation Less</td>
                    <td>PostPaid</td>
                    <td>{{plan.RATEPLAN_CODE}}</td>
                    <td><a href="" ng-click="open(plan.RATEPLAN_CODE)">{{plan.RATEPLAN_DETAILS}}</a></td>
                </tr>

            </tbody>
        </table>
        <dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>

PopUp页面：

   <dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>
    <table class="table table-bordered" >
            <thead>
                <tr>
                    <th at-implicit at-sortable at-attribute="country" at-initial-sorting="asc">Country</th>
                    <th at-implicit at-sortable at-attribute="rate">Rate</th>
                    <th at-implicit at-sortable at-attribute="call_type">Call Type</th>

                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="rate in rate_list|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
                    <td>{{rate.TO_COUNTRY}}</td>
                    <td>{{rate.TARIFF}}</td>
                    <td>{{rate.CALL_TYPE}}</td>
                </tr>

            </tbody>
        </table>

Answer 1

您可以像这样使用多个分页，您必须对每个分页控件使用不同的分页-id：

<!-- first pagination instance -->
<ul>
    <li dir-paginate="customer in customers | itemsPerPage: 10" pagination-id="cust">{{ customer.name }}</li>
</ul>

<dir-pagination-controls pagination-id="cust"></dir-pagination-controls>

<!-- second pagination instance -->
<ul>
    <li dir-paginate="branch in branches | itemsPerPage: 10" pagination-id="branch">{{ customer.name }}</li>
</ul>

<dir-pagination-controls pagination-id="branch"></dir-pagination-controls>

这是doc链接