[转载]angular分页

使用angular版本:1.7

html

	<div class="abouts"><div class="commentbox" ><ul><li><div class="number">{$good_percent}%</div><p>好评度</p></li><li><p>好评({$good_percent}%)</p></li><li><p>中评({$medium_percent}%)</p></li><li><p>差评({$pool_percent}%)</p></li></ul><div class="allbar"><p><span class="act"><a href="" ng-click="reSearch(0)">全部评价({$total})</a></span>&nbsp;&nbsp;<span><a href=""  ng-click="reSearch(1)">好评({$good})</a></span>&nbsp;&nbsp;<span><a href="" ng-click="reSearch(2)">中评({$medium})</a></span>&nbsp;&nbsp;<span><a href="" ng-click="reSearch(3)">差评({$pool})</a></span>&nbsp;&nbsp;</p></div></div><ul class="_comments" ><li ng-repeat="item in commentlist"><div class="fl"><img src="{{item.image} }" alt="" /><p class="tel">{{ item.cellphone } }</p></div><div class="fr"><div class="desc"><p>{{ item.content } }</p><div class="tips"><div class="tip">实用高效</div><div class="tip">服务态度好</div></div><p class="doservice"><span> 办理业务:香港公司注册</span> <span class="datetime">{{item.add_time} }</span></p></div></div></li> </ul><div class="pagination" ng-if="totalNum!=1"><a   ng-if="hasPrev()"   ng-click="paging($event,0)">上一页</a><a   ng-click="paging($event,1)">1</a><a   ng-click="paging($event,2)">2</a><a   ng-if="totalNum>2"  ng-click="paging($event,3)">3</a><a   ng-if="hasNext()" ng-click="paging($event,-1)">下一页</a><a  ng-click="paging($event,-2)">末页</a><a>总共{{totalNum} }页</a></div>
</div>							

js代码

var app=angular.module('myApp',[]);app.controller('commCtrl', function($scope, $http) {var reSearch=function(postPoints){var postData={'id':goods_id, //产品id'post_points':postPoints||$scope.paginationConf.postPoints,  //全部0，好评1，中评2，差评3'limit':$scope.paginationConf.itemsPerPage,  //行数'page':$scope.paginationConf.currentPage  //页数};$http({method: 'POST',url: '/comment',data:postData,}).then(function successCallback(response) {// 请求成功执行代码// console.log(response.data)$scope.totalNum=Math.ceil(response.data.total/$scope.paginationConf.itemsPerPage);$scope.commentlist=response.data.list;}, function errorCallback(response) {// 请求失败执行代码console.log('请求失败')});}$scope.reSearch=reSearch;$scope.paginationConf={firstPage:1, //起始页 currentPage:1, //当前页itemsPerPage:5,  //每页展示的数据条数postPoints:0  // 全部0，好评1，中评2，差评3};	$scope.paging=function(evt,nType){$(evt.target).addClass("active").siblings().removeClass("active");switch(nType){case -2:$scope.paginationConf.currentPage=$scope.totalNum;break;case -1:$scope.paginationConf.currentPage++;break;case 1:$scope.paginationConf.currentPage=1;break;case 2:$scope.paginationConf.currentPage=2;break;case 3:$scope.paginationConf.currentPage=3;break;default:$scope.paginationConf.currentPage--;} $scope.reSearch(0);}$scope.hasNext=function(){if($scope.paginationConf.currentPage<$scope.totalNum){return true;}else{return false;} }$scope.hasPrev=function(){if($scope.paginationConf.currentPage>1){return true;}else{return false;} }$scope.reSearch(0);// $scope.$watch('paginationConf.currentPage + paginationConf.postPoints', reSearch(0));})

第一次用angular分页,处理的有些简陋,还有一些疑问留着下次解答:
1.ng-controller放在排序的外层包裹内容显示不出来,也不报错,放在最外层或者body下面包裹的第一层上才显示数据

** 在angular的函数里面获取元素de属性值,可通过click方法传参($event.target),相当于jquery的this
更多参考:https://www.cnblogs.com/sxz2008/p/6379427.html