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@H_301_145@ demo @H_301_145@=@H_301_145@ angular.module(@H_301_145@"@H_301_145@demoModule@H_301_145@"@H_301_145@,[@H_301_145@‘@H_301_145@pagination@H_301_145@‘@H_301_145@]);
15 @H_301_145@        demo.controller(@H_301_145@"@H_301_145@demoController@H_301_145@"@H_301_145@,function@H_301_145@ ($scope,$http) {
16 @H_301_145@            $scope.paginationConf @H_301_145@=@H_301_145@ {
17 @H_301_145@                currentPage: @H_301_145@1@H_301_145@,18 @H_301_145@                itemsPerPage: @H_301_145@2@H_301_145@,19 @H_301_145@                totalItems: @H_301_145@10@H_301_145@,20 @H_301_145@                onChange: function@H_301_145@ () {
21                     // alert("变了");
22 @H_301_145@                    console.log(@H_301_145@"@H_301_145@变了@H_301_145@"@H_301_145@);
23 @H_301_145@                }
24 @H_301_145@            };
25             /*
26                 pagination功能特点：
27                     1.双向绑定
28                         改变相应的变量，则分页条就会发生相应的改变。
29                         currentPage itemsPerPage totalItems都是双向绑定的
30                     改变一个就会改变了
31                     2.并不处理记录数据，页面记录数据的更新必须由我们自己完成。
32                注意:
33                     pagination功能和记录数据显示完全没有关系，只提供分页参数处理。
34                 面记录数据的更新必须由我们自己完成
35              */
36 @H_301_145@            $scope.increTotalItems @H_301_145@= function@H_301_145@(){
37 @H_301_145@                console.log($scope.paginationConf.totalItems);
38 
39 @H_301_145@                $scope.nameList.push( @H_301_145@"@H_301_145@刘备@H_301_145@" @H_301_145@+@H_301_145@ $scope.nameList.length);
40 @H_301_145@                $scope.paginationConf.totalItems @H_301_145@=@H_301_145@ $scope.nameList.length;
41 
42                 // $scope.paginationConf.totalItems = $scope.paginationConf.totalItems + 1;
43 @H_301_145@                console.log($scope.paginationConf.totalItems);
44 @H_301_145@            };
45 
46 @H_301_145@            $scope.nameList @H_301_145@=@H_301_145@ [@H_301_145@"@H_301_145@孙权@H_301_145@"@H_301_145@,@H_301_145@"@H_301_145@刘备@H_301_145@"@H_301_145@,@H_301_145@"@H_301_145@曹操@H_301_145@"@H_301_145@,@H_301_145@"@H_301_145@大乔@H_301_145@"@H_301_145@,@H_301_145@"@H_301_145@小乔@H_301_145@"@H_301_145@];
47 
48 @H_301_145@        });
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分页模块
Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据

猜你在找的Angularjs相关文章

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