Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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                 @R_153_10586@lItems: 10,20                 onChange: function () {
21                     // alert("变了");
22                     console.log("变了");
23                 }
24             };
25             /*
26                 pagination功能特点:
27                     1.双向绑定
28                         改变相应的变量,则分页条就会发生相应的改变。
29                         currentPage itemsPerPage @R_153_10586@lItems都是双向绑定的
30                     改变一个就会改变了
31                     2.并不处理记录数据,页面记录数据的更新必须由我们自己完成。
32                注意:
33                     pagination功能和记录数据显示完全没有关系,只提供分页参数处理。
34                 面记录数据的更新必须由我们自己完成
35              */
36             $scope.incre@R_153_10586@lItems = function(){
37                 console.log($scope.paginationConf.@R_153_10586@lItems);
38 
39                 $scope.nameList.push( "刘备" + $scope.nameList.length);
40                 $scope.paginationConf.@R_153_10586@lItems = $scope.nameList.length;
41 
42                 // $scope.paginationConf.@R_153_10586@lItems = $scope.paginationConf.@R_153_10586@lItems + 1;
43                 console.log($scope.paginationConf.@R_153_10586@lItems);
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="incre@R_153_10586@lItems()" 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>
@H_772_587@Angular pagination分页模块

大佬总结

以上是大佬教程为你收集整理的Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据全部内容,希望文章能够帮你解决Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。