一尘不染

将角度引导UI分页连接到表

angularjs

我正在努力在要创建的桌子上设置角度分页。

我已经完成了文档工作。但是，我没有看到如何将分页连接到表。我的分页大小与数组大小匹配。它们是正确数量的按钮链接，用于页面的页面长度。但是，我的桌子仍然全长，无法测试分页。

这是我的桌子主体

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

段落内的总项目，每页项目和当前页面均对分页控制器上的每次单击做出响应。但是表格没有改变。

这是我的控制器

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

当它起作用时，我会将其大部分移入指令中。我只想先设置它。

阅读 255

2020-07-04

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

将分页指令添加到页面

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

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

就这么简单。如果要查看有效的演示，请检查Plunker。

柱塞

2020-07-04