angularjs – 将angular bootstrap ui paginate连接到表

发布时间：2020-12-17 07:48:28 所属栏目：安全来源：网络整理

导读：我正在创建一个我正在创建的桌子上的角度分页. 我已经完成了文档.但是,我没有看到如何将分页连接到表.我的分页大小与数组大小匹配.它们是用于页面页面长度的正确数量的按钮链接.然而,我的桌子仍然是全长的,因此我无法测试我的分页. 这是我的桌子 tbody tr ng

我正在创建一个我正在创建的桌子上的角度分页.

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

这是我的桌子

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

当我开始工作时,我会将大部分内容转移到指令中.我只想先把它设置好.

您可以使用自定义过滤器执行此操作.

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

Plunker

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!