Plunker

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>

我还设置了 p标签以确保标签正在响应

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

paragraphare内的总项目，每页项目和当前页面都响应分页控制器上的每次点击。但是表格没有变化。

这是我的控制器

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将新数组返回到repeat。请记住，过滤器是非破坏性的。它们不会更改实际的作用域数组。他们正在创建一个新的数组供重复使用。

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);
    }
  };
});

将分页指令添加到页面

这是您将添加到html中的指令的已清理版本。 请勿在分页指令中使用某种ngClick或ngChange 。 ngModel设置为currentPage变量，因此您无需执行任何其他操作。由于currentPage是通过ngModel双向绑定的，当它更改时，分页指令将更新以及页面过滤器，这将反过来更新重复的表行。

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

就这么简单。如果您想查看工作演示，请查看Plunker。

将angular bootstrap ui paginate连接到表

1 个答案:

Plunker