我如何告诉 ui-Bootstrap 分页哪些内容？答案

【问题标题】：How do I tell ui-Bootstrap what content to paginate?我如何告诉 ui-Bootstrap 分页哪些内容？
【发布时间】：2014-07-02 10:28:06
【问题描述】：

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

这是我所做的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;
  });

【问题讨论】：

标签： angularjs twitter-bootstrap pagination angular-ui-bootstrap

【解决方案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);
    });
  });
});

【讨论】：

我试过这个，我可以让它更新内容，除了我最终得到更多页面而不是实际项目。我更新了 Plunker plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=preview，所以你可以看到我在说什么。尝试点击任何关于 6 的内容。
这是因为您将$scope.totalItems 设置为 64 而不是使用以下内容：$scope.totalItems = $scope.friends.length; 我在这里计算您的朋友列表的长度。如果你只是说它有 64 个项目，即使它没有，你当然会得到 7 页，因为 64 / 10 = 6,4 --> 7 页。但是您的列表仅包含 32 项，因此您会得到一些空白页面。
数据未正确更新，因为控制器中的观察者在您的工厂的查询操作完成之前被触发。因此，您需要对 $scope.friends 变量的 $promise 做出反应。我已经更新了上面的答案。看看吧。
你的真棒！太棒了。对于任何寻找工作示例的人，请查看此 Plunkr plnkr.co/edit/AD1AGCYIm1dZhbuoPhxX?p=preview
所以你做到了 :) 我更新了 Plunker。感谢您的所有帮助

【解决方案2】：

ui-bootstrap 0.10 不使用 ng-model 更新当前页面。

使用page="currentPage" 显示当前页面。

使用on-select-page="setPage(page)" 更改当前页面。

例子在这里：

http://plnkr.co/edit/UIWIeDSKIK4bG96eoJmt?p=preview

如果你想使用 ng-model。将您的 ui-bootstrap 版本更新到 0.11

【讨论】：

抱歉，我才刚刚开始学习 Angular，我不确定我是否完全理解它是如何工作的。我可以看到它正在更新“当前页面：1”，它没有对名称进行分页，这让我很困惑，我如何连接分页以便它只显示 10 个名称并对其余名称进行分页。

【解决方案3】：

您可以使用在 ng-repeat 中创建的变量。这行得通。我一直使用它，直到我不得不改变它。

ng-repeat="friend in friends.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) track by $index"

但是我发现这个问题的最佳解决方案是创建一个过滤器并将其链接起来。将它放在链中的最后，因为您可能希望在它之前使用其他过滤器。这是一个使用 orderby 过滤器的示例。不同之处在于您可以订购整个数组，然后分页并仅显示您想要显示的部分。

function paginateFilter() {
  return function (friends, currentPage, itemsPerPage) {
    var filteredFlowers = flowers.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))
    return filteredFriends;
  };
}

这里是 html。您将不得不使用具有多个变量的过滤器。

ng-repeat="friend in main.friends |orderBy: 'name' | paginate: main.currentPage: main.itemsPerPage">

其中 main 是控制器名称。

【讨论】：

"我一直使用它，直到我不得不改变它。"为什么要改变它？这是最好的解决方案。完美的！谢谢

【解决方案4】：

使用 angularjs 1.5 组件和 Typescript 实现

searchresults.controller.ts

import {Group as Groups, GroupSearchCriteria as GroupsSearchCriteria, GroupSearchResults as GroupsSearchResults } from "../../models/Groups";
import GroupsService from "groups/groups.service";

interface ISearchResultsController {
    groups: Groups[];
    groupsSearchCriteria: GroupsSearchCriteria;
    pageChanged(): void;
    splitGroupsPagination(): void;
  }

class SearchResultsController implements ISearchResultsController {

    groups: Groups[];
    groupsSearchCriteria: GroupsSearchCriteria;
    groupresSearchCriteria: any;
    TotalResults: any;
    CurrentPage: any;
    ResultsPerPage: any;
    pageCount: number;
    begin: number;
    end: number;
    sortedResults: Groups[];

           constructor(private groupsService: GroupsService, private groupSearchResults: GroupsSearchResults) {
        var isolatedScopeSearchResults = this;
        this.groups = isolatedScopeSearchResults.groupsService.searchCallback.SearchResults;
        this.groupresSearchCriteria = isolatedScopeSearchResults.groupsService.searchCallback.Criteria;
        this.TotalResults = 7;
        this.CurrentPage = 1;
        this.ResultsPerPage = 5;
    }

    $onInit() {
        this.splitGroupsPagination();
    }

    splitGroupsPagination() {
        this.pageCount = Math.ceil(this.TotalResults / this.ResultsPerPage);
        this.begin = ((this.CurrentPage - 1) * this.ResultsPerPage);
        this.end = this.begin + this.ResultsPerPage;
        this.sortedResults = this.groups.slice(this.begin, this.end);
    }

    pageChanged() {
        this.splitGroupsPagination();
    }
}

export default SearchResultsController;

searchresults.component.ts

    import SearchResultsController from "./searchresults.controller";

    class SearchResultsComponent implements ng.IComponentOptions {
        template = `


    <div id="groupSearchResults" class="box-response">
      <!-- start: results header with btn add-->
        <div class="box-header">
            <h2><span>Search Results: </span><span>{{$ctrl.groups.length}}</span> <span>Term: {{$ctrl.groupresSearchCriteria.SearchDescription}}</span></h2>
        </div>

        <div class="box-content">


    <table class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <td>Name</td>
                <td>Id</td>
                <td>Consent Group</td>
                <td>Permitted Uris</td>
                <td>Actions</td>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="group in $ctrl.sortedResults">
                <td>{{group.Name}}</td>
                <td>{{group.Id}}</td>
                <td>{{group.IncludeInConsentGroups}}</td>
                <td>{{group.PermittedUris}}</td>
                <td>
                   <a class="btn btn-success" href="" ui-sref="edit({editgroupId:group.Id})"><i class="fa fa-edit"></i></a>
                </td>
            </tr>
        </tbody>
    </table>

    </div>

  <uib-pagination total-items="$ctrl.TotalResults" ng-model="$ctrl.CurrentPage" items-per-page="$ctrl.ResultsPerPage" ng-change="$ctrl.pageChanged()"></uib-pagination>

    </div>


       `;

        controller = ['GroupsService',SearchResultsController];
    }

    export default SearchResultsComponent;

【讨论】：