angularjs分頁

圖表的簡單分頁，功能不全可是採用異步請求的方法，留之後查詢吧

<!-------------------------------------景區畫像圖表-------------------------------------->
      <div class="col-lg-6 attachper">
           <div class="panel">
            
                  <div class="panel-body">
                         <h6 class="table-head">景區畫像</h6>
                         <div  ng-controller="spotphotoCtrl"  class="col-lg-12 tablestyle"> 
                                <table class="table table-striped  table-condensed table-lone ">
                               
                                 <tr>
                                  <th>序號</th><th>景區名稱</th><th>客流統計（入）</th><th>車流統計（出）</th><th>門票銷售（張）</th><th>門票收入（元）</th><th>接團數量</th>
                                </tr>
                               <tr ng-repeat="x in items">
                                    <td ng-bind="$index + 1"></td><td ng-bind="x.SpotName"></td><td ng-bind="x.TouristsTatistics"></td><td ng-bind="x.TrafficsTatistics"></td><td ng-bind="x.TicketNumber"></td><td ng-bind="x.TicketSales"></td><td ng-bind="x.GroupNumber"></td>
                                 </tr>
                         </table>
                         <pagination></pagination>

                        
                      </div>
                  </div>
         </div>

app.constant("host", "http://172.16.40.XX");
app.controller('spotphotoCtrl',['$scope','$http','host' ,function($scope,$http,host) {
   $scope.urlfor=function( pagenow, pageSize){
    $scope.urla = host + "/API/BigData/GetScenicInfo?pageCurrent="+pagenow+"&pageSize="+pageSize;
     $http.get($scope.urla).success(function (response) {
	     var models = eval(response);
          $scope.items =models.Data; 
	        });
         } 
	 }]);
 /***************************************分頁指令*******************************************************/
app.directive('pagination', function() {
	return {
		restrict: 'E',
		template: '<nav style="text-align: center;"><ul class="pagination">'+
                                    '<li><a ng-click="Previous()"><span>上一頁</span></a></li>'+
                                    '<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" ><a ng-click="selectPage(page)" >{{ page }}</a></li>'+
                                    '<li><a ng-click="Next()"><span>下一頁</span></a></li>'+
                                '</ul></nav>',
		replace: true,
		link: function($scope, element, attrs, controller) {
			                    $scope.pages =100 //分頁數
                                $scope.pageSize = 7;
                                $scope.pageList = [];//顯示頁數
                                $scope.selPage = 1;
                                //設置表格數據源(分頁)
                                $scope.setData = function (page) {
                                  $scope.urlfor(page,$scope.pageSize) 
                                   }
                               $scope.urlfor($scope.selPage,$scope.pageSize)
                                //分頁要repeat的數組
                                for (var i = 0; i < $scope.newPages; i++) {
                                    $scope.pageList.push(i + 1);

                                }
                                $scope.selectPage = function (page) {
                                    //不能小於1大於最大
                                    if (page < 1 || page > $scope.pages) return;
                                    //最多顯示分頁數5
                                    if (page > 2) {
                                        //由於只顯示5個頁數，大於2頁開始分頁轉換
                                        var newpageList = [];
                                        for (var i = (page - 3); i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)); i++) {
										
                                            newpageList.push(i + 1);
										}
                                        $scope.pageList = newpageList;
                                    }
									
                                    $scope.selPage = page;
                                    $scope.setData(page);
                                    $scope.isActivePage(page);
                                    console.log("選擇的頁：" + page);
                                };
	                 //設置當前選中頁樣式
                                $scope.isActivePage = function (page) {
                                    return $scope.selPage == page;
                                };
	                            //上一頁
                                $scope.Previous = function () {
                                    $scope.selectPage($scope.selPage - 1);
                                }
                                //下一頁
                                $scope.Next = function () {
									
                                    $scope.selectPage($scope.selPage + 1);
                                };      
		
		}
	};
});