angularjs – 如何告诉ui-bootstrap什么内容分页？

我正在使用ui-Bootstrap,我试图让分页工作,但我似乎缺少一些东西.我已经阅读了这些文件,并且看了一堆堆积物,试图弄清楚它们是如何指定分页的内容,但我没有运气.

这是我做了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>

控制器：

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

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

> bootstrap-css
> angular.js
> angular-ui-bootstrap

你的身体可能看起来像这样：

<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>

然后定义以下控制器：

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

原文链接：https://www.f2er.com/angularjs/142946.html

angularjs – 如何告诉ui-bootstrap什么内容分页？

猜你在找的Angularjs相关文章