2016-06-07 66 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」'。 –