Angular js UI.bootstrap 中的分页对我不起作用

pagination in angular js ui.bootstrap doesnt work for me

本文关键字：分页 不起作用 js UI bootstrap Angular      更新时间：2023-09-26

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

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

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

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

使用版本 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>

.JS

// 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;
  });
相关文章：