首页 - 互联网

Angular pagination分页模块只提供分页参数处理不处理分页记录数据

作者: 五速梦信息网
时间: 2026年04月04日 13:51

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>angular demo-9 分页功能</title>

     <script src="../plugins/angularjs/angular.min.js"></script>
<!-- 分页插件 -->

     <link href="../plugins/angularjs/pagination.css">

     <script src="../plugins/angularjs/pagination.js"></script>

     <!-- 分页插件/ -->
<script>

         var demo = angular.module("demoModule", ['pagination']);

         demo.controller("demoController", function ($scope, $http) {

             $scope.paginationConf = {

                 currentPage: 1,

                 itemsPerPage: 2,

                 totalItems: 10,

                 onChange: function () {

                     // alert("变了");

                     console.log("变了");

                 }

             };

             /*

                 pagination功能特点：

                     1.双向绑定

                         改变相应的变量，则分页条就会发生相应的改变。

                         currentPage itemsPerPage totalItems都是双向绑定的

                     改变一个就会改变了

                     2.并不处理记录数据，页面记录数据的更新必须由我们自己完成。

                注意:

                     pagination功能和记录数据显示完全没有关系，只提供分页参数处理。

                 面记录数据的更新必须由我们自己完成

              */

             $scope.increTotalItems = function(){

                 console.log($scope.paginationConf.totalItems);
$scope.nameList.push( "刘备" + $scope.nameList.length);

                 $scope.paginationConf.totalItems = $scope.nameList.length;
// $scope.paginationConf.totalItems = $scope.paginationConf.totalItems + 1;

                 console.log($scope.paginationConf.totalItems);

             };
$scope.nameList = ["孙权", "刘备", "曹操", "大乔", "小乔"];
});

     </script>
</head>

 <body ng-app="demoModule" ng-controller="demoController">
<!--<p ng-repeat="name in nameList">{{name}}</p>-->
<table>

         <tr ng-repeat="name in nameList" ng-model="nameList">

             <td>{{name}}</td>

         </tr>

     </table>
<input type="button" ng-click="increTotalItems()" value="自增">

     <input ng-model="paginationConf.currentPage">

     <input ng-model="paginationConf.itemsPerPage">
<tm-pagination conf="paginationConf"></tm-pagination>

 </body>

 </html>