AngularJS分頁插件


1.
angular.module('app',['mePagination'])
  .controller('myController',['$scope',function($scope){
    $scope.myPage={
      currentPage:1,//訪問第幾頁數據,從1開始
      totalItems:0,//數據庫中總共有多少條數據
      itemsPerPage: 30,//默認每頁展示多少條數據,可更改
      pagesLength: 15,
      perPageOptions: [10, 20, 30, 40, 50,60]//可選擇的每頁展示多少條數據
    };

//監測當頁碼。總數據,每頁展示數據個數變化時,重新加載數據
    $scope.$watch(function ()
      return $scope.myPage.itemsPerPage+' '+$scope.myPage.currentPage+' '+ $scope.myPage.totalItems;
    },getList);

    function getList(){
    //獲取列表需要時,將頁碼重置為1
      $scope.myPage.currentPage=myPage.pageNub;

    //傳給服務器時,頁碼從0開始
    $http.get(host_name+url,{params:{"page":$scope.myPage.currentPage- 1,"limit":$scope.myPage.itemsPerPage,'}})
  .    success(function(d){
        $scope.list= d.data.result;
        $scope.myPage.totalItems=d.data.total;//當獲取總數據后,修改默認值

      }).error(function(){
        console.log('error...');
      })
    }

  }])

在頁面中引入自己的css與js文件:

<link rel="stylesheet" href="my-pagination.css"/>
<script type="text/javascript" src="my-pagination.js"></script>

 


<div ng-if="myPage.totalItems" my-pagination pg="myPage"></div>

pg屬性不能改,雙向數據綁定的

下載地址:http://pan.baidu.com/s/1slb65TN


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM