angular分頁指令操作
更新時間:2017年01月09日 08:35:08 作者:灰鍋
這篇文章主要為大家詳細介紹了angular分頁指令操作的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
目前的多個項目中都用到分頁這個功能,為了提高可復用性,我特地分離出來寫了個分頁的指令。直接貼代碼,詳情如下:
index.html
<body id="sBill" ng-controller="map_ctrl"> <table class="table table-striped" style="margin: 0px;border:1px solid #ccc;width:800px;min-height:200px;"> <tbody> <tr ng-repeat="l in orderList"> <td><input type="radio" name="id" ng-click="select(l.id)" value="{{l.id}}" /></td> <td>{{l.time}}</td> </tr> </tbody> </table> <!-- paging datalist屬性值(dataList)為要分頁的原始數據--> <rj-date datalist="dataList"></rj-date> </body>
index.js
var app = angular.module("doSBill",[]); app.controller("map_ctrl",function($scope,$http,$location,$timeout){ // 原始數據 $scope.dataList=[ {'time':1},{'time':2},{'time':3},{'time':4},{'time':5},{'time':6},{'time':7},{'time':8},{'time':9},{'time':10}, {'time':11},{'time':12},{'time':13},{'time':14},{'time':15},{'time':16},{'time':17},{'time':18},{'time':19},{'time':20}, {'time':21},{'time':22},{'time':23},{'time':24},{'time':25},{'time':26},{'time':27},{'time':28},{'time':29},{'time':30}, {'time':31} ]; //$on:監(jiān)聽或接收數據;此處用于監(jiān)聽分頁指令,修改的列表視圖數據 $scope.$on("orderList", function(e, orderList){ $scope.orderList = orderList; }); });
指令模板 page.html
<div> <p> <span> 總記錄數:<span class="rjAllNums" ng-bind="page.nums"></span> 本頁記錄數:<span class="rjNowNums" ng-bind="page.nowNums"></span> </span> <button class="rjFirtPage" ng-click="jumpPage(1,dataList)">首頁</button> <button class="rjPrePage" ng-click="jumpPage(page.now-1,dataList)">上一頁</button> <span> <span class="rjNowPage" ng-bind="page.now"></span>/ <span class="rjAllPage" ng-bind="page.pageCount"></span> </span> <button class="rjNextPage" ng-click="jumpPage(page.now+1,dataList)">下一頁</button> <button class="rjLastPage" ng-click="jumpPage(page.pageCount,dataList)">尾頁</button> 到第 <input class="rjJumpInput" type="text" ng-model="page.jumpPage" name="rjPageName" value=""/> 頁 <button class="rjJumpBtn" ng-click="jumpPage(page.jumpPage,dataList)">確定</button> </p> </div>
指令定義page.js
app.directive('rjDate',function(){ return { restrict: 'EA', replace: false, scope : {dataList:'=datalist'},//設置scope.dataList與指令屬性“datalist”值綁定,詳情看指令scop作用域 templateUrl: 'pageDirective/template/page.html', link: function(scope,elem,attr){ var page={};//分頁對象 scope.page=page; scope.page.onePageNums=10; //每頁記錄數 scope.page.nums=0; scope.page.now=1; scope.page.nowNums=0; scope.page.pageCount=1; scope.getPage=getPage; //設置獲取頁面的ng-click scope.page.orderList=[]; getPage(1,scope.dataList);//初始化獲取第一頁數據 scope.jumpPage=function(page,dataList){ if(!parseInt(page)){ return null; } getPage(page,dataList); } function getPage(pageNow,dataList){//獲取指定的頁面 scope.page.nums=dataList.length; //設置總記錄數 scope.page.now=pageNow;//設置當前是第幾頁 pagination();//設置當前有多少頁面 生成一個頁面數組 scope.page.orderList=getOnePage(dataList);//獲取一頁的數據 scope.$emit("orderList", scope.page.orderList);//$emit:子傳父,傳遞event與data;此處用于給父controller傳遞數據orderList } function getOnePage(arr){//獲取一頁的數據 if(arr==null){ return null; } var newarr=new Array(); if(scope.page.now<1){ scope.page.now=1; } if(scope.page.now>scope.page.pageCount){ scope.page.now=scope.page.pageCount; } scope.page.nowNums=scope.page.onePageNums; var pagenow=scope.page.now; var begin=(pagenow-1)*scope.page.onePageNums; var end=begin+scope.page.onePageNums; var lens=scope.page.nums; if(end>lens){ end=lens; scope.page.nowNums=lens-begin; } for(begin;begin<end;begin++){ newarr.push(arr[begin]); } return newarr; } function pagination(){//設置當前有多少頁面 生成一個頁面數組 if(scope.page.nums<=scope.page.onePageNums){ scope.page.pageCount=1; }else{ if(scope.page.nums%scope.page.onePageNums==0){ scope.page.pageCount=scope.page.nums/scope.page.onePageNums; }else{ scope.page.pageCount=parseInt(scope.page.nums/scope.page.onePageNums)+1; } } } } } });
效果如圖所示:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Angular1.x自定義指令實例詳解
- Angular之指令Directive用法詳解
- Angular.js自定義指令學習筆記實例
- 詳解Angular.js指令中scope類型的幾種特殊情況
- AngularJS內置指令
- AngularJS學習筆記之基本指令(init、repeat)
- AngularJS中的指令全面解析(必看)
- 用AngularJS的指令實現tabs切換效果
- 深入講解AngularJS中的自定義指令的使用
- Angularjs編寫KindEditor,UEidtor,jQuery指令
- 自定義Angular指令與jQuery實現的Bootstrap風格數據雙向綁定的單選與多選下拉框
- Angular1.x復雜指令實例詳解
相關文章
詳解AngularJS controller調用factory
本篇文章主要介紹了詳解AngularJS controller調用factory,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05angular8.5集成TinyMce5的使用和詳細配置(推薦)
這篇文章主要介紹了angular8.5集成TinyMce5的使用和詳細配置,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11AngularJS入門教程之 XMLHttpRequest實例講解
本文主要講解 AngularJS XMLHttpRequest,這里給大家整理相關資料并提供實例代碼,有需要的小伙伴參考下2016-07-07