angular.js第一个项目 简单分页
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-touch-fullscreen" content="YES"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="Expires" content="-1"> <meta http-equiv="pragram" content="no-cache"> <link rel="stylesheet" href="/css/group/base.css"> <link rel="stylesheet" href="/css/group/product_list.css"> <script type="text/javascript" src="/scripts/group/angular1.4.6.min.js"></script> <title>我的团</title> </head> <body> <div ng-app="myGroups" ng-controller="groupsCtrl" when-scrolled="get_more(1)"> <ul> <li> 我的团 </li> <li ng-repeat="x in groups"> <div style="width:100px;float:left;"> <img style="width:100px;height:100px;" src="{{ x.img_url}}" /> </div> <div style="width:200px;float:left;"> <div><a href="details.aspx?groupsid={{ x.groups_Id}}">{{ x.act_name}}</a></div> <div>【{{ x.groups_size}}人团】</div> <div>{{ x.groups_price}}</div> <div>状态:{{ getState(x.groups_state)}}</div> </div> <div style="clear:both;"></div> </li> </ul> 总记录:{{ totalcount}} 总页数:{{ totalpage}} 当前页:{{ pageindex}} <button ng-click="get_more(-1)">上一页</button> <button ng-click="get_more(1)">下一页</button> </div> <script> var app = angular.module("myGroups",[]); app.controller("groupsCtrl",["$scope","$http",function($scope,$http){ $scope.api='http://localhost:48732/groups/Default/GetGroupsByMobile'; $scope.pageindex=0; $scope.pagesize = 10; $scope.totalpage = 0; $scope.totalcount = 0; $scope.mobile = '<%=mobile%>'; $scope.groups = []; $scope.getState = function (state) { if (state == 0) { return "组团中" } else if (state == 1) { return "已完成" } else { return "组团失败" } } $scope.get_more = function (increase) { $scope.pageindex += increase; //if ($scope.pageindex<1) { // $scope.pageindex = 1; //} //if ($scope.pageindex > $scope.totalpage && $scope.totalpage>0) { // $scope.pageindex = $scope.totalpage; //} $http({ method: "POST", url: $scope.api, data:'mobile='+$scope.mobile+'&pageindex='+$scope.pageindex+'&pagesize='+$scope.pagesize, headers: {'Content-Type': 'application/x-www-form-urlencoded' } }). success(function (data, status) { if (status == 200 && data.Success == 'true') { $scope.totalpage = data.data.TotalPage; $scope.totalcount = data.data.TotalCount; for (var i = 0; i < data.data.PageData.length; i++) { $scope.groups.push(data.data.PageData[i]); } //$scope.groups = data.data.PageData; } }). error(function(data, status) { }); }//get_more END //第一次加载打开第一页数据 $scope.get_more(1); }]);//controller END </script> </body> </html>