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