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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo-9 分页功能</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7 
 8     <!-- 分页插件 -->
 9     <link href="../plugins/angularjs/pagination.css">
10     <script src="../plugins/angularjs/pagination.js"></script>
11     <!-- 分页插件/ -->
12 
13     <script>
14         var demo = angular.module("demoModule", ['pagination']);
15         demo.controller("demoController", function ($scope, $http) {
16             $scope.paginationConf = {
17                 currentPage: 1,
18                 itemsPerPage: 2,
19                 totalItems: 10,
20                 onChange: function () {
21                     // alert("变了");
22                     console.log("变了");
23                 }
24             };
25             /*
26                 pagination功能特点：
27                     1.双向绑定
28                         改变相应的变量，则分页条就会发生相应的改变。
29                         currentPage itemsPerPage totalItems都是双向绑定的
30                     改变一个就会改变了
31                     2.并不处理记录数据，页面记录数据的更新必须由我们自己完成。
32                注意:
33                     pagination功能和记录数据显示完全没有关系，只提供分页参数处理。
34                 面记录数据的更新必须由我们自己完成
35              */
36             $scope.increTotalItems = function(){
37                 console.log($scope.paginationConf.totalItems);
38 
39                 $scope.nameList.push( "刘备" + $scope.nameList.length);
40                 $scope.paginationConf.totalItems = $scope.nameList.length;
41 
42                 // $scope.paginationConf.totalItems = $scope.paginationConf.totalItems + 1;
43                 console.log($scope.paginationConf.totalItems);
44             };
45 
46             $scope.nameList = ["孙权", "刘备", "曹操", "大乔", "小乔"];
47 
48         });
49     </script>
50 
51 </head>
52 <body ng-app="demoModule" ng-controller="demoController">
53 
54     <!--<p ng-repeat="name in nameList">{{name}}</p>-->
55 
56     <table>
57         <tr ng-repeat="name in nameList" ng-model="nameList">
58             <td>{{name}}</td>
59         </tr>
60     </table>
61 
62     <input type="button" ng-click="increTotalItems()" value="自增">
63     <input ng-model="paginationConf.currentPage">
64     <input ng-model="paginationConf.itemsPerPage">
65 
66     <tm-pagination conf="paginationConf"></tm-pagination>
67 </body>
68 </html>
Angular pagination分页模块

 

posted @ 2019-06-29 09:59  没有理由不会呀  阅读(351)  评论(0)    收藏  举报