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

Question

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

索引.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>

Controller :

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

您的寻呼机不在 Controller 范围内，因为您只在 <table> 上设置了 Controller

你需要移动ng-controller更高的元素包括你的 box-body元素和 <uib-pagination>元素