angular js ui.bootstrap 中的分页对我不起作用答案

【问题标题】：pagination in angular js ui.bootstrap doesnt work for meangular js ui.bootstrap 中的分页对我不起作用
【发布时间】：2015-01-29 08:50:35
【问题描述】：

我将ui-bootstrap-tpls-0.12.0.js 添加到我的项目和我们的手风琴中，现在我想使用分页但我收到此错误

ngModelCtrl.$render is not a function

这是我的代码

<div ng-controller="paginationCtrl">
<pagination num-pages="noOfPages" current-page="currentPage" on-select-page="pageChanged(page)"></pagination>    

</div>

我添加了 ui.bootstrap

angular.module("boors", ['ui.router','ui.bootstrap','angularUtils.directives.uiBreadcrumbs','ngAnimate','truncate']);

在我的脚本标签中我有

<script src="<?=$this->assetsBase?>/js/lib/ui-bootstrap-tpls-0.12.0.js"></script>

手风琴工作正常，但分页不起作用

【问题讨论】：

你用的是什么版本的角度？
v1.2.25 我在我的项目中使用

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

【解决方案1】：

仔细查看分页控件的文档。 http://angular-ui.github.io/bootstrap/#/pagination

我猜你至少缺少 ng-model 属性，否则你的分页不知道在哪里寻找当前值。猜猜这就是你对当前页面的意思。

【讨论】：

【解决方案2】：

使用版本 10，这里是分页示例

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

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

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

</html>

// Code goes here

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

【讨论】：