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

发布时间：2020-12-17 17:19:12 所属栏目：安全来源：网络整理

导读：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" 1

 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分页模块

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

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