angular1的分页
2024-04-02 07:15:34
angular1分页
闲来无事，整个angular1的分页玩玩，也简单，拿出来给大家分享一下！
1、ng-show()方案
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>分页</title>
6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 <link rel="stylesheet" type="text/css" href="../04-angular练习/bootstrap-3.3.7/css/bootstrap.css"/>
8 <script src="../08-angular自定义指令/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
9 <script src="../04-angular练习/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
10 <script src="../../angular-1.4.6.min.js" type="text/javascript" charset="utf-8"></script>
11 <style type="text/css">
12 *{ 13 padding: 0;
14 margin: 0;
15 list-style: none;
16 text-decoration: none;
17 box-sizing: border-box;
18 }
19 html,body{ 20 width:100%;
21 }
22 .pagiBody{ 23 width:100%;
24 height:200px;
25 border:1px solid #007AFF;
26 }
27 </style>
28 </head>
29 <body ng-app="myApp" ng-controller="myCtrl">
30 <form novalidate>
31 <input type="number" name="" id="" ng-model="num1"/>
32 </form>
33 <div >
34 <div class="btn-toolbar" role="toolbar">
35 <div class="btn-group">
36 <button type="button" class="btn btn-default">上一页</button>
37 <button type="button" class="btn btn-default" ng-repeat="i in pages()" ng-click="show($index)">{{i}}</button>
38 <button type="button" class="btn btn-default">下一页</button>
39 </div>
40 </div>
41 <div class="pagiBody">
42 <ul>
43 <li ng-repeat="x in data" ng-show="s($index)">{{x}}</li> <!---->
44 </ul>
45 </div>
46 </div>
47 <script type="text/javascript">
48 var myApp = angular.module("myApp",[]);
49 myApp.controller("myCtrl",["$scope",function($scope){
50 //初识每页显示条数
51 $scope.num1 = 5;
52 //模拟数据
53 $scope.data = [
54 {
55 "id":1,
56 "name":"鱼香肉丝111",
57 "price":15,
58 "count":0
59 },
60 {
61 "id":2,
62 "name":"西红柿炒番茄222",
63 "price":12,
64 "count":0
65 },
66 {
67 "id":3,
68 "name":"澳洲龙虾333",
69 "price":190,
70 "count":0
71 },
72 {
73 "id":4,
74 "name":"鲍鱼444",
75 "price":10,
76 "count":0
77 },
78 {
79 "id":5,
80
81 "name":"东北大乱炖555",
82 "price":12,
83 "count":0
84 },
85 {
86 "id":6,
87
88 "name":"馒头666",
89 "price":20,
90 "count":0
91 },
92 {
93 "id":7,
94
95 "name":"鱼香肉丝777",
96 "price":15,
97 "count":0
98 },
99 {
100 "id":8,
101
102 "name":"西红柿炒番茄888",
103 "price":12,
104 "count":0
105 },
106 {
107 "id":9,
108
109 "name":"澳洲龙虾999",
110 "price":190,
111 "count":0
112 },
113 {
114 "id":10,
115
116 "name":"鲍鱼1010",
117 "price":10,
118 "count":0
119 },
120 {
121 "id":11,
122
123 "name":"东北大乱炖1111",
124 "price":12,
125 "count":0
126 },
127 {
128 "id":12,
129
130 "name":"馒头1212",
131 "price":20,
132 "count":0
133 },
134 {
135 "id":13,
136
137 "name":"鱼香肉丝1313",
138 "price":15,
139 "count":0
140 },
141 {
142 "id":14,
143
144 "name":"西红柿炒番茄1414",
145 "price":12,
146 "count":0
147 },
148 {
149 "id":15,
150
151 "name":"澳洲龙虾1515",
152 "price":190,
153 "count":0
154 },
155 {
156 "id":16,
157
158 "name":"鲍鱼1616",
159 "price":10,
160 "count":0
161 },
162 {
163 "id":17,
164
165 "name":"东北大乱炖1717",
166 "price":12,
167 "count":0
168 },
169 {
170 "id":18,
171
172 "name":"馒头1818",
173 "price":20,
174 "count":0
175 },
176 {
177 "id":19,
178
179 "name":"鱼香肉丝1919",
180 "price":15,
181 "count":0
182 },
183 {
184 "id":20,
185
186 "name":"西红柿炒番茄2020",
187 "price":12,
188 "count":0
189 },
190 {
191 "id":21,
192
193 "name":"澳洲龙虾2121",
194 "price":190,
195 "count":0
196 },
197 {
198 "id":22,
199
200 "name":"鲍鱼2222",
201 "price":10,
202 "count":0
203 },
204 {
205 "id":23,
206
207 "name":"东北大乱炖2323",
208 "price":12,
209 "count":0
210 },
211 {
212 "id":24,
213
214 "name":"馒头2424",
215 "price":20,
216 "count":0
217 }
218
219 ];
220 //根据数据获取页数
221 $scope.pages = function(){
222 $scope.curr = [];
223 for(var i=1;i<=Math.ceil($scope.data.length/($scope.num1==""?$scope.num1=5:$scope.num1));i++){224 $scope.curr.push(i);
225 }
226 return $scope.curr;
227 }
228 //当前页数
229 $scope.curPage = 1;
230 $scope.show = function($index){
231 $scope.curPage = $index+1;
232 }
233 //页面显示的数据部分
234 $scope.s = function($index){
235 return ($scope.curPage-1)*$scope.num1<=$index&&$index<$scope.curPage*$scope.num1;
236 }
237 }]);
238
239 </script>
240 </body>
241 </html>2、模拟后台截取方案
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>分页</title>
6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 <link rel="stylesheet" type="text/css" href="../04-angular练习/bootstrap-3.3.7/css/bootstrap.css"/>
8 <script src="../08-angular自定义指令/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
9 <script src="../04-angular练习/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
10 <script src="../../angular-1.4.6.min.js" type="text/javascript" charset="utf-8"></script>
11 <style type="text/css">
12 *{ 13 padding: 0;
14 margin: 0;
15 list-style: none;
16 text-decoration: none;
17 box-sizing: border-box;
18 }
19 html,body{ 20 width:100%;
21 }
22 .pagiBody{ 23 width:100%;
24 height:200px;
25 border:1px solid #007AFF;
26 }
27 </style>
28 </head>
29 <body ng-app="myApp" ng-controller="myCtrl">
30 <form novalidate>
31 <input type="number" name="" id="" ng-model="num1" ng-change="per()"/>
32 </form>
33 <div>
34 <div class="btn-toolbar" role="toolbar">
35 <div class="btn-group">
36 <button type="button" class="btn btn-default">上一页</button>
37 <button type="button" class="btn btn-default" ng-repeat="i in pages()" ng-click="show($index)">{{i}}</button>
38 <button type="button" class="btn btn-default">下一页</button>
39 </div>
40 </div>
41 <div class="pagiBody">
42 <ul>
43 <li ng-repeat="x in data1">{{x}}</li> <!---->
44 </ul>
45 </div>
46 </div>
47 <script type="text/javascript">
48 var myApp = angular.module("myApp",[]);
49 myApp.controller("myCtrl",["$scope",function($scope){
50 //初识每页显示条数
51 $scope.num1 = 5;
52 //模拟数据
53 $scope.data = [
54 {
55 "id":1,
56 "name":"鱼香肉丝111",
57 "price":15,
58 "count":0
59 },
60 {
61 "id":2,
62 "name":"西红柿炒番茄222",
63 "price":12,
64 "count":0
65 },
66 {
67 "id":3,
68 "name":"澳洲龙虾333",
69 "price":190,
70 "count":0
71 },
72 {
73 "id":4,
74 "name":"鲍鱼444",
75 "price":10,
76 "count":0
77 },
78 {
79 "id":5,
80
81 "name":"东北大乱炖555",
82 "price":12,
83 "count":0
84 },
85 {
86 "id":6,
87
88 "name":"馒头666",
89 "price":20,
90 "count":0
91 },
92 {
93 "id":7,
94
95 "name":"鱼香肉丝777",
96 "price":15,
97 "count":0
98 },
99 {
100 "id":8,
101
102 "name":"西红柿炒番茄888",
103 "price":12,
104 "count":0
105 },
106 {
107 "id":9,
108
109 "name":"澳洲龙虾999",
110 "price":190,
111 "count":0
112 },
113 {
114 "id":10,
115
116 "name":"鲍鱼1010",
117 "price":10,
118 "count":0
119 },
120 {
121 "id":11,
122
123 "name":"东北大乱炖1111",
124 "price":12,
125 "count":0
126 },
127 {
128 "id":12,
129
130 "name":"馒头1212",
131 "price":20,
132 "count":0
133 },
134 {
135 "id":13,
136
137 "name":"鱼香肉丝1313",
138 "price":15,
139 "count":0
140 },
141 {
142 "id":14,
143
144 "name":"西红柿炒番茄1414",
145 "price":12,
146 "count":0
147 },
148 {
149 "id":15,
150
151 "name":"澳洲龙虾1515",
152 "price":190,
153 "count":0
154 },
155 {
156 "id":16,
157
158 "name":"鲍鱼1616",
159 "price":10,
160 "count":0
161 },
162 {
163 "id":17,
164
165 "name":"东北大乱炖1717",
166 "price":12,
167 "count":0
168 },
169 {
170 "id":18,
171
172 "name":"馒头1818",
173 "price":20,
174 "count":0
175 },
176 {
177 "id":19,
178
179 "name":"鱼香肉丝1919",
180 "price":15,
181 "count":0
182 },
183 {
184 "id":20,
185
186 "name":"西红柿炒番茄2020",
187 "price":12,
188 "count":0
189 },
190 {
191 "id":21,
192
193 "name":"澳洲龙虾2121",
194 "price":190,
195 "count":0
196 },
197 {
198 "id":22,
199
200 "name":"鲍鱼2222",
201 "price":10,
202 "count":0
203 },
204 {
205 "id":23,
206
207 "name":"东北大乱炖2323",
208 "price":12,
209 "count":0
210 },
211 {
212 "id":24,
213
214 "name":"馒头2424",
215 "price":20,
216 "count":0
217 }
218
219 ];
220 //根据数据获取页数
221 $scope.pages = function(){
222 $scope.curr = [];
223 for(var i=1;i<=Math.ceil($scope.data.length/($scope.num1==""?$scope.num1=5:$scope.num1));i++){224 $scope.curr.push(i);
225 }
226 return $scope.curr;
227 }
228 //初识当前页面
229 $scope.curPage = 1;
230 $scope.show = function($index){
231 $scope.curPage = $index+1;
232 per();
233 }
234 //当前页面显示的数据部分
235 per();
236 function per(){
237 $scope.data1 = $scope.data.slice(($scope.curPage-1)*$scope.num1,$scope.curPage*$scope.num1);
238 }
239
240 }]);
241
242 </script>
243 </body>
244 </html>希望能帮助到大家，如有不足，请留言！谢谢
转载于:https://www.cnblogs.com/toTo-li/p/7724258.html
angular1的分页相关推荐
- 关于angular1与angular2的应用区别
angular1.0的这些繁杂的api,还有它的执行速度,运行效率,学习曲线,都被人吐槽,最近一直在用ng1,实在很想吐槽. 最近写ng2的项目,写了一些ng2基础的应用(包括angular-cli, ...
- 手把手教你JavaEE的分页查询、分页展示，有了这个，你的项目又多了一个谈资
前言: 我们在写项目的时候,往往有一些项目的信息展示.而展示的数据量往往是很大的,这时候,加入一个分页的功能往往是最理想的选择. 先简单描述一下功能: 根据你的数据量和指定的页面展示数据条数,进行查询 ...
- django自带的分页功能
django自带的分页功能 django中自带的分页功能有缺陷,但是也是一种思路,所以在下做一个整理,方便以后使用,还有服务各位小伙伴. django视图部分的代码.(注释才是重点) from dja ...
- Mysql分页order by数据错乱重复
公司用的是Mybatis,发现分页和排序时直接传递参数占位符用的都是 ,由于,由于,由于有SQL注入风险,要改为#,但是封装page类又麻烦,所以直接使用了 pageHelper 插件了,方便快捷,但 ...
- Django 分页和使用Ajax5.3
分页 Django提供了一些类实现管理数据分页,这些类位于django/core/paginator.py中 Paginator对象 Paginator(列表,int):返回分页对象,参数为列表数据, ...
- [JAVA EE] JPA 查询用法:自定义查询,分页查询
项目已上传:https://codechina.csdn.net/qq_36286039/javaee 自定义查询 问题:内置的crud功能不满足需求时如何添加自定义查询? 几种自定义查询方法 方法命 ...
- datatable java实现分页_jQuery Datatable - 使用Php的服务器端处理数据分页
我有jquery datatable分页的问题(服务器端处理) . 例如,我在数据库中有 24 条记录 . 计数正确显示,总分页也正确显示 . 当我点击 Next or 2nd page 时,它会根据 ...
- Oracle分页存储过程
CREATE OR REPLACE Procedure Soa_Getpager(p_Pagesize Int, --每页记录数p_Pageno Int, --当前页码,从 1 开始p_Sqlcols ...
- mybaties分页
首先引入jar包: <dependency><groupId>com.github.pagehelper</groupId><artifactId>pa ...
最新文章
- QButtonGroup 的使用
- css :hover
- .net core 注入中的三种模式：Singleton、Scoped 和 Transient
- 如何动态改变audio的播放的src
- BAE3.0还不支持本地写入文件
- html文档图标恢复,恢复HTM HTML图标方法
- 猜数字游戏（Java）
- 跨域异常与nginx的underscores_in_headers on
- 类似pyinstaller_pyinstaller安装与使用——那些我踩过的坑
- “123456”连续七年霸榜，2019最糟糕密码榜单出炉
- Oracle10g删除
- python决策树预测模型_带决策树回归模型的负交叉值得分
- 全球及中国电子材料市场需求分析与十四五投资潜力预测报告2021年版
- ClientToScreen 和ScreenToClient 用法
- C++ Reference: Standard C++ Library reference: C Library: cfenv: FE_DOWNWARD
- ssms mysql_SQL Server免费版的安装以及使用SQL Server Management Studio(SSMS)连接数据库的图文方法...
- B-spline曲线基函数计算Matlab程序
- 前端例程20210510：新拟物风格（Neumorphism）设计与实现
- 史上最全大数据学习资源整理
- 第一次参与国际空间站ISS 的SSTV活动