angular-bootstrap 2 нумерации страниц, выпуск во второй нумерации страниц

0

изображение, показывающее разбиение на страницы. У меня есть список элементов со многими таблицами, в которых initaily я показываю заголовки по циклу. Каждый заголовок таблицы работает как аккордеон, а на клике любой заголовок таблицы отправляется один запрос, чтобы получить данные для этого заголовка и заполнить соответственно.

Я применил разбиение на страницы на заголовки и его рабочий тон, но разбиение на страницы на любом не работает.

Ниже я упомянул код 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();
};
Теги:
pagination
angular-bootstrap

1 ответ

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-if создает проблему и ng-model="currentTalkPageNo" в этом случае.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню