2016-06-07 67 views
0

image showing paginations 我有很多表的项目列表,其中initaily我按循环显示标题每个表标题作为手风琴和单击任何表头一个请求发送以获取该数据标题和tbody相应地填充。角引导2分页,问题在第二分页

我已应用分页标题和其工作正常,但分页上的任何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(); 
}; 

回答

0

下面分页父格码

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

删除到

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

并使用

ng-model="$parent.currentTalkPageNo" 

代替

ng-model="currentTalkPageNo" 

CSS

.dn{display:none;} 
+0

不知道为什么NG-如果在这种情况下产生的问题,'NG-模型= “currentTalkPageNo”'。 –