подключение угловой бутстрап ui paginate к таблице

Question

Я работаю над настройкой угловой разбивки на страницы, которую я создаю.

Я работал над документами. Тем не менее, я не вижу, как подключить разбиение на страницы на стол. Мой размер страницы соответствует размеру массива. Это правильное количество ссылок на кнопки для отображения длины страницы. Тем не менее, мой стол все еще на полном ходу, и это не позволяет мне проверить мою разбивку на страницы.

Вот мой стол тело

 <tbody> 
       <tr ng-repeat="drink in editableDrinkList | orderBy:'-date'"> 
        <td>[[drink.name]]</td> 
        <td>[[drink.date |date: format :timezone]]</td> 
        <td>[[drink.caffeineLevel]]</td> 
        <td> 
         <a ng-click="delete(drink._id)"> 
          <i style="font-size:18px; margin-right:5%" class="fa fa-times"></i> 
         </a> 

         <a href="" ng-click="update(drink)"> 
          <i style="font-size:22px;" class="fa fa-pencil-square-o"></i> 
         </a> 
        </td> 
       </tr> 
    </tbody> 

Я поставил мой стол тело за пределами таблицы тега Я попробовал его внутри, но мой контроль разбиения на страницах не появлялся.

Вот моя пагинация

<pagination 
     total-items="totalItems" 
     ng-model="currentPage" 
     items-per-page="itemsPerPage" 
     ng-change="pageChanged()" 
     ng-click="setPage(currentPage)"> 
</pagination> 

Я также создал р тег, чтобы убедиться, что вкладки отвечают

<div> 
     <p>total Items [[totalItems]]</p> 
     <p>itemsPerPage [[itemsPerPage]]</p> 
     <p>current page [[currentPage]]</p> 
    </div> 

Итоговые пункты, элементы на страницу и текущей странице внутри в параграфе все ответы на каждый щелчок на контроллере разбиения на страницы. Однако таблица не меняется.

Вот мой контроллер

var editabledrinkSet = function(){ 
     editableArray = []; 

     DrinkLibrary.getAllDrinks().success(function(data){ 
     for (var i = 0; i < data.length; i++) { 
      if(data[i].editable) { 
      editableArray.push(data[i]) 
      }; 
     }; 
     $scope.currentPage = 1; 
     $scope.totalItems = editableArray.length; 

     $scope.itemsPerPage =10; 
     $scope.maxSize = 3; 

     $scope.setPage = function(pageNo) { 
      $scope.currentPage = pageNo; 
     } 
     $scope.pageChanged = function() { 
      $log.log('Page changed to: ' + $scope.currentPage); 
     }; 

     $scope.editableDrinkList = editableArray; 
     }); 
    }; 

Когда я заставить его работать я буду двигаться большую часть его из в директиву. Я просто хочу, чтобы он был настроен первым.

Answer 1

Вы можете сделать это с помощью настраиваемого фильтра.

Добавить пользовательский фильтр для ngRepeat

Вы должны быть в состоянии сказать повторение, какой индекс собирается быть отправной точкой для каждой страницы и сколько элементов включить на странице. Вы можете сделать это, создав простой фильтр (я назвал его страницы). Этот фильтр будет использовать значения currentPage и itemsPerPage, которые вы уже настроили в своем контроллере.

<tr ng-repeat="drink in editableDrinkList | orderBy:'-date' | pages: currentPage : itemsPerPage"> 

Создание пользовательского фильтра

Для создания пользовательского фильтра вы передаете на ваше имя, а затем функцию фабрики, которая возвращает функцию уборщица. Функция worker автоматически получает входной массив в качестве его первого значения. Следующие значения - те, которые вы указали в своем фильтре.

Таким образом, фильтр страниц получает входной массив и два переданных им значения (currentPage и pageSize). Затем вы просто используете Array.slice для возврата нового массива к повторению. Помните, что фильтры не являются разрушительными. Они не меняют фактический охваченный массив. Они создают новый массив для использования повтора.

app.filter('pages', function() { 
    return function(input, currentPage, pageSize) { 
    //check if there is an array to work with so you don't get an error on the first digest 
    if(angular.isArray(input)) { 
     //arrays are 0-base, so subtract 1 from the currentPage value to calculate the slice start 
     var start = (currentPage-1)*pageSize; 
     //slice extracts up to, but not including, the element indexed at the end parameter, 
     //so just multiply the currentPage by the pageSize to get the end parameter 
     var end = currentPage*pageSize; 
     return input.slice(start, end); 
    } 
    }; 
}); 

Добавить директиву PAGINATION на странице

Вот очищены версия директивы вы добавляете в HTML.Не используйте вид ngClick или ngChange в директиве разбиения на страницы. ngModel устанавливается в переменную currentPage, поэтому вам больше нечего делать. Поскольку currentPage имеет двустороннюю привязку через ngModel, при изменении директивы pagination будет обновляться, а также фильтр страниц, что, в свою очередь, обновит повторяющиеся строки таблицы.

<pagination 
    total-items="totalItems" 
    ng-model="currentPage" 
    items-per-page="itemsPerPage" 
    max-size="maxSize"> 
</pagination> 

Это все просто. Если вы хотите увидеть рабочую демонстрацию, проверьте Plunker.

Plunker