连接 angular bootstrap ui 分页到 table

Question

我正在为我正在创建的 table 设置 angular 分页。

我已经阅读了文档。但是，我没有看到如何将分页连接到 table。我的分页大小与数组大小匹配。它们是正确数量的按钮链接来分页页面长度。然而，我的 table 仍然是完整的，因此我无法测试我的分页。

这是我的tablebody

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

我在 table 标签之外设置了 table body 我在里面试过了，但是我的分页控件没有出现。

这是我的分页

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

段落内的总项目数、每页项目数和当前页数都响应分页控制器上的每次点击。但是 table 没有改变。

这是我的控制器

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 添加自定义过滤器

您需要能够告诉 repeat 哪个索引将成为每个页面的起点以及页面上要包含多少项目。您可以通过创建一个简单的过滤器（我称之为页面）来做到这一点。此过滤器将使用您已在控制器中设置的 currentPage 和 itemsPerPage 值。

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

创建自定义过滤器

要创建一个自定义过滤器，您需要传入您的名字，然后传入一个 return 作为辅助函数的工厂函数。 worker 函数自动接收输入数组作为它的第一个值。后续值是您在过滤器中指定的值。

因此页面过滤器获取输入数组和传递给它的两个值（currentPage 和 pageSize）。然后你只需使用 Array.slice 到 return 新数组来重复。请记住，过滤器是非破坏性的。他们并没有改变实际的作用域数组。他们正在创建一个新数组供重复使用。

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 双向绑定的，因此当它更改时，分页指令将更新以及页面过滤器，这将依次更新您重复的 table 行。

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

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

连接 angular bootstrap ui 分页到 table

connecting angular bootstrap ui paginate to table

pagination

angularjs

angular-ui-bootstrap

Plunker