如何告诉 ui-Bootstrap 要分页的内容? [英] How do I tell ui-Bootstrap what content to paginate?

问题描述

我正在使用 ui-Bootstrap 并且我试图让分页工作，但我似乎遗漏了一些东西.我已经阅读了文档并查看了一堆 plunkers 试图弄清楚他们如何指定要分页的内容，但我没有运气.

这是我所做的http://plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=预览

<div ng-repeat="朋友中的朋友">{{friend.name}}

<pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination><p>总项目数:{{totalItems}}<br/>每页项目数:{{itemsPerPage}}<br/>当前页面:{{currentPage}}</p></节>

控制器:

angular.module('plunker', ['ui.bootstrap']).controller('contentCtrl', function ($scope) {$scope.friends = [{'name':'Jack'},{'name':'Tim'},{'name':'Stuart'},{'name':'Richard'},{'name':'Tom'},{'name':'弗兰克'},{'name':'Ted'},{'name':'迈克尔'},{'name':'Albert'},{'name':'Tobby'},{'name':'Mick'},{'name':'尼古拉斯'},{'name':'Jesse'},{'name':'Lex'},{'name':'Robbie'},{'name':'Jake'},{'name':'Levi'},{'name':'爱德华'},{'name':'Neil'},{'name':'Hugh'},{'name':'Hugo'},{'name':'Yanick'},{'name':'Matt'},{'name':'Andrew'},{'name':'Charles'},{'name':'奥利弗'},{'name':'Robin'},{'name':'Harry'},{'name':'James'},{'name':'开尔文'},{'name':'David'},{'name':'保罗'}];$scope.totalItems = 64;$scope.itemsPerPage = 10$scope.currentPage = 1;$scope.setPage = 函数 (pageNo) {$scope.currentPage = pageNo;};$scope.pageChanged = function() {console.log('页面更改为:' + $scope.currentPage);};$scope.maxSize = 5;$scope.bigTotalItems = 175;$scope.bigCurrentPage = 1;});

解决方案

我可以简单地添加以下引用:

1. bootstrap-css
2. angular.js
3. angular-ui-bootstrap

你的身体可能是这样的:

<头>...<身体><h4>分页好友</h4><section class="main" ng-controller="contentCtrl"><div ng-repeat="过滤朋友中的朋友">{{friend.name}}

<分页 total-items="totalItems" items-per-page="itemsPerPage"ng-model="currentPage" ng-change="pageChanged()"></pagination><p>总项目数:{{totalItems}}
每页项目数:{{itemsPerPage}}<br/>当前页面:{{currentPage}}</p></节>

然后定义以下控制器:

var app = angular.module('plunker', ['ngResource', 'ui.bootstrap']);app.factory('friendsFactory', function($resource) {返回 $resource('friends.json');});app.controller('contentCtrl', function ($scope,friendsFactory) {$scope.friends =friendsFactory.query();$scope.itemsPerPage = 10$scope.currentPage = 1;//$scope.maxSize = 5;//$scope.bigTotalItems = 175;//$scope.bigCurrentPage = 1;$scope.pageCount = 函数 () {返回 Math.ceil($scope.friends.length/$scope.itemsPerPage);};$scope.friends.$promise.then(function () {$scope.totalItems = $scope.friends.length;$scope.$watch('currentPage + itemsPerPage', function() {var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),结束 = 开始 + $scope.itemsPerPage;$scope.filteredFriends = $scope.friends.slice(begin, end);});});});

I am using ui-Bootstrap and I am trying to get the pagination working but I seem to be missing something. I have read the documentation and looked at a bunch of plunkers to try and work out how they are specifying which content to paginate but I am having no luck.

Here is what I have done http://plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=preview

<section class="main" ng-controller="contentCtrl">
  <div ng-repeat="friend in friends">
    {{friend.name}}
  </div>
  <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>

  <p>
    total Items: {{totalItems}}<br />
    Items per page: {{itemsPerPage}}<br />
    Current Page: {{currentPage}}
  </p>
</section>

Controller:

angular.module('plunker', ['ui.bootstrap'])
  .controller('contentCtrl', function ($scope) {

    $scope.friends = [
      {'name':'Jack'},
      {'name':'Tim'},
      {'name':'Stuart'},
      {'name':'Richard'},
      {'name':'Tom'},
      {'name':'Frank'},
      {'name':'Ted'},
      {'name':'Michael'},
      {'name':'Albert'},
      {'name':'Tobby'},
      {'name':'Mick'},
      {'name':'Nicholas'},
      {'name':'Jesse'},
      {'name':'Lex'},
      {'name':'Robbie'},
      {'name':'Jake'},
      {'name':'Levi'},
      {'name':'Edward'},
      {'name':'Neil'},
      {'name':'Hugh'},
      {'name':'Hugo'},
      {'name':'Yanick'},
      {'name':'Matt'},
      {'name':'Andrew'},
      {'name':'Charles'},
      {'name':'Oliver'},
      {'name':'Robin'},
      {'name':'Harry'},
      {'name':'James'},
      {'name':'Kelvin'},
      {'name':'David'},
      {'name':'Paul'}
    ];

    $scope.totalItems = 64;
    $scope.itemsPerPage = 10
    $scope.currentPage = 1;

    $scope.setPage = function (pageNo) {
      $scope.currentPage = pageNo;
    };

    $scope.pageChanged = function() {
      console.log('Page changed to: ' + $scope.currentPage);
    };

    $scope.maxSize = 5;
    $scope.bigTotalItems = 175;
    $scope.bigCurrentPage = 1;
  });

解决方案

I could simply add the following references:

1. bootstrap-css
2. angular.js
3. angular-ui-bootstrap

Your body could look like this:

<html ng-app="friends"> 
<head>
...
</head>
<body>
   <h4>Paginated Friends</h4>
   <section class="main" ng-controller="contentCtrl">
      <div ng-repeat="friend in filteredFriends">
         {{friend.name}}
      </div>
      <pagination total-items="totalItems" items-per-page="itemsPerPage" 
         ng-model="currentPage" ng-change="pageChanged()"></pagination>
      <p>
         Total items: {{totalItems}}<br />
         Items per page: {{itemsPerPage}}<br />
         Current Page: {{currentPage}}
      </p>
   </section>
</body>
</html>

Then define the following controller:

var app = angular.module('plunker', ['ngResource', 'ui.bootstrap']);

app.factory('friendsFactory', function($resource) {
  return $resource('friends.json');
});

app.controller('contentCtrl', function ($scope, friendsFactory) {
  $scope.friends = friendsFactory.query();

  $scope.itemsPerPage = 10
  $scope.currentPage = 1;

  // $scope.maxSize = 5;
  // $scope.bigTotalItems = 175;
  // $scope.bigCurrentPage = 1;

  $scope.pageCount = function () {
    return Math.ceil($scope.friends.length / $scope.itemsPerPage);
  };

  $scope.friends.$promise.then(function () {
    $scope.totalItems = $scope.friends.length;
    $scope.$watch('currentPage + itemsPerPage', function() {
      var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
        end = begin + $scope.itemsPerPage;

      $scope.filteredFriends = $scope.friends.slice(begin, end);
    });
  });
});

这篇关于如何告诉 ui-Bootstrap 要分页的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！