angular1的分页
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>
