Question

目前我使用Angular.js和UIBootstrap实现了一个简单的分页，但单个显示第一页u.u 我有下一个代码：

的index.html

<div class="box-body table-responsive no-padding">
              <table class="table table-hover" ng-controller="IndexCtrl">
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Level</th>
                  <th>Actions</th>
                </tr>
                <tr ng-repeat="user in users| filter:search |startFrom:(currentPage - 1) * pageSize|limitTo: pageSize">
                  <td>@{{ user.name }}</td>
                  <td>@{{ user.email }}</td>
                  <td><span class="label label-success">@{{ user.level.permission }}</span></td>
                  <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
                </tr>

              </table>
            </div><!-- /.box-body -->
            <uib-pagination total-items="users.length" ng-model='currentPage' items-per-page='pageSize' boundary-links="true">
           </uib-pagination>

控制器：

var Suap = angular.module('Suap', ['ui.bootstrap']);

 Suap.filter('startFrom',function(){
   return function(data, start){
    return data.slice(start);
 }
})
 .controller('IndexCtrl', function($scope, $http){
  $scope.users = [],
  $scope.pageSize=5,
  $scope.currentPage=1;


  $http({
    method: 'GET',
    url: '/route'
  }).then(function(response) {
     $scope.users = response.data;
  }); 
})

谢谢：D

Answer 1

您的寻呼机位于控制器范围之外，因为您只在<table>

上设置了控制器

您需要将ng-controller向上移动到包含box-body元素和<uib-pagination>元素的元素

Answer 2

您需要将所有页码绑定到uib-pagination。为此，在控制器内部创建一个函数，并从函数中动态设置当前页面值的范围。您还需要将ng-controller指令放到root元素中以获取分页

如何使用Angular.js和UI Bootstrap创建分页

2 个答案: