angular-bootstrap 2 paginations,在第二个分页中发出

时间:2016-06-07 08:19:53

标签: angularjs pagination angular-bootstrap

image showing paginations   我有多个表的项目列表,其中initaily我通过循环显示标题每个表标题用作手风琴,然后单击任何表标题,一个请求发送以获取该标题的数据,并相应地填充tbody。

我已经对标题进行了分页,并且它的工作正常,但对任何不起作用的人都有分页。

下面我提到了HTML代码。

usersddl

低于控制器代码

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

1 个答案:

答案 0 :(得分:0)

删除以下代码

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

在分页父div中

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

并使用

  ng-model="$parent.currentTalkPageNo"

而不是

   ng-model="currentTalkPageNo"

CSS

 .dn{display:none;}