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>
