angular-bootstrap 2 分页，第二个分页问题

Question

image showing paginations 我有许多表格的项目列表，最初我通过循环显示标题，每个表格标题都作为手风琴工作，然后单击任何表格标题，一个请求发送一个请求以获取该标题的数据，并相应地填充 tbody。

我已经在标题上应用了分页，它工作正常，但任何 tbody 上的分页都不起作用。

下面我提到了 HTML 代码。

<div class="col-md-12">
 <!-- start table one -->
    <div class="table table-responsive series-tbl series-tbl-m">
      <table data-ng-repeat="series in serieses track by series._id" class="table table-striped" id="headingOne">
    <thead class="table-blue">
        <tr >
            <th width="5%"><input ng-click="checkAllTalks(series._id,series.Selected)" ng-model="series.Selected" selected="{{series.Selected}}" type="checkbox"></th>
            <th width="28%">{{series.title}}</th>
            <th width="22%">{{series.totalCount || 0}} talks</th>
            <th width="15%">{{ series.totalDuration || 0 | timestring  }}</th>
            <th width="15%">${{series.totalPrice || 0}}</th>
            <th width="18%" class="th-action-icon">
                <!-- <a href="#"><i class="fa fa-plus"></i></a> -->
                <a ng-click="openUpdateSeriesModal('md',series._id)" href="#"><i class="fa fa-pencil"></i></a>
                <a href="javascript:void(0);" ng-click="deleteSeries(series._id)"><i class="fa fa-trash"></i></a>
                <a role="button" ng-click="showTalks(series._id)" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><i class="fa fa-caret-down"></i></a>
            </th>
        </tr>
    </thead>
    <tbody id="series-{{series._id}}" class="panel-collapse collapse in dn allSeriesTalks" role="tabpanel" aria-labelledby="headingOne">
        <tr ng-repeat='talk in seriesTalks  track by talk._id'>
            <td><input ng-click="checkUncheckTalk(talk._id,talk.Selected)" ng-model="talk.Selected" selected="{{talk.Selected}}"   type="checkbox"></td>
            <td>{{talk.title}}</td>
            <td>{{talk.duration || 0 | timestring }}</td>
            <td>{{bytesToMB(talk.size) || 0}} mb</td>
            <td>${{talk.price || 0}}</td>
            <td class="action-item">
              <!-- <a href="#"><i class="fa fa-plus icon-gray"></i></a> -->
                <a ng-click="openUpdateTalkModal('md',talk._id)" href="#"><i class="fa fa-pencil icon-gray" ></i></a>
                <a  ng-click="deleteTalk(talk._id)" href="javascript:void(0);"><i class="fa fa-trash icon-gray"></i></a>
              </td>

            </tr>
            <tr>
                <td colspan="6">

                <div data-ng-if="totalTalkCount> 10" class="col-md-12">
                 <div pagination total-items="totalTalkCount" 
                 ng-model="currentTalkPageNo"
                 max-size="maxSize"
                 class="pagination-sm  pull-right"  
                 boundary-links="true"
                 ng-change="talkPageChanged(currentSeriesId)"></div>
             </div>
              <div data-ng-if="totalTalkCount == 0" class="col-md-2">
                <div>No record Found.</div>
              </div>
             </td>
             </tr>
             </tbody>
         </table>
     </div> <!-- end table one -->
 </div>
<div class="col-md-12">
<div pagination total-items="totalItems" 
ng-model="currentPage"
max-size="maxSize"
class="pagination-sm pull-right" 
boundary-links="true"
ng-change="pageChanged()"></div>
</div>

以及下面的控制器代码

//first it is working properly

vm.currentPage = 1;

vm.maxSize = 5;

vm.pageChanged = function () {
console.log('page changed:', vm.currentPage);
vm.getSeriesList();
//$scope.getMembers();
};

//second its not working
vm.currentTalkPageNo = 1;
vm.talkPaginate = false;
vm.talkPageChanged = function (seriesId) {
console.log('page talk changed:', vm.currentTalkPageNo);//each time it shows 1 page no

vm.talkPaginate = true;
vm.showTalks(seriesId);
//$scope.getMembers();
};

Answer 1

删除下面的代码

 data-ng-if="totalTalkCount == 0"

在分页父 div 到

  data-ng-class="{ 'dn':totalTalkCount <= 10}"

并使用

  ng-model="$parent.currentTalkPageNo"

而不是

   ng-model="currentTalkPageNo"

css

 .dn{display:none;}