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

【问题标题】：How Create Pagination with Angular.js and UI Bootstrap如何使用 Angular.js 和 UI Bootstrap 创建分页
【发布时间】：2016-09-15 19:27:50
【问题描述】：

目前我使用 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>

控制器：

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

【问题讨论】：

你的问题是什么？
如何显示所有页面，因为单显示1但存在更多
你能在这里检查我的问题吗？ stackoverflow.com/questions/43546340/…

标签： javascript jquery angularjs twitter-bootstrap pagination

【解决方案1】：

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

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

【讨论】：

还可能希望将过滤后的数组别名传递给寻呼机，这样您显示的页面就不会多于过滤后的数组包含的页面
你能在这里查看我的问题stackoverflow.com/questions/43546340/… 吗？

【解决方案2】：

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

【讨论】：

你能在这里查看我的问题stackoverflow.com/questions/43546340/… 吗？