摘要:指令模板顯示第到第條記錄總共條記錄每頁顯示條記錄指令列表數據接口請求參數請求對象數據事件名外部調用分頁查詢的事件監聽事件服務配置參數加載數據改變頁大小下一頁上一頁加載指定頁
指令html模板
page.html
指令
app.directive("pagination", ["$http", "$q", function ($http, $q) { return { restrict: "E", templateUrl: "./modules/business/page.html", replace: true, scope: { list: "=", //列表數據 url: "@", //接口url method: "@", //get or post requestParam: "=", //請求參數 requestData: "=", //請求對象數據 event: "@" //事件名, 外部調用分頁查詢的事件 }, link: function (scope, element) { //監聽事件 scope.$on(scope.event, function (event, data) { console.log(scope.event, data); scope.loadData(); }); //ajax服務 var AjaxService = { get: function (url, params) { var defered = $q.defer(); $http({ method: "GET", url: url, params: params }) .success(function (data) { defered.resolve(data); }) .error(function (err) { defered.reject(err); }); return defered.promise; }, post: function (url, params, data) { var defered = $q.defer(); $http({ method: "POST", url: url, params: params, data: data }) .success(function (data) { defered.resolve(data); }) .error(function (err) { defered.reject(err); }); return defered.promise; } }; //配置參數 scope.conf = { currentPage: 1, totalPage: 1, endPage: 1, pageSize: 15, pages: [], total: 0, pageSizeList: [10, 15, 20, 25, 30, 35, 40, 45, 50] }; //加載數據 scope.loadData = function () { scope.requestParam = scope.requestParam instanceof Object && scope.requestParam || {}; scope.requestData = scope.requestData instanceof Object && scope.requestData || {}; scope.requestParam.page = scope.conf.currentPage; scope.requestParam.pageSize = scope.conf.pageSize; var promise = null; if (scope.method == "GET") promise = AjaxService.get(scope.url, scope.requestParam); else if (scope.method == "POST") promise = AjaxService.post(scope.url, scope.requestParam, scope.requestData); promise.then(function (resp) { if (resp && resp.code == 0) { if (resp.result && resp.result instanceof Array) scope.list = resp.result; else scope.list = []; if (resp.total && typeof(resp.total) == "number") scope.conf.total = resp.total; else scope.conf.total = 0; } scope.calcPages(); }); }; //改變頁大小 scope.changePageSize = function (n) { scope.conf.pageSize = n; scope.conf.currentPage = 1; scope.loadData(); }; //下一頁 scope.next = function () { if (scope.conf.currentPage < scope.conf.totalPage) { scope.conf.currentPage++; scope.loadData(); } }; //上一頁 scope.prev = function () { if (scope.conf.currentPage > 1) { scope.conf.currentPage--; scope.loadData(); } }; //加載指定頁 scope.loadPage = function (page) { if (scope.conf.currentPage != page) { scope.conf.currentPage = page; scope.loadData(); } }; //查詢 scope.query = function () { scope.conf.currentPage = 1; scope.loadData(); }; //計算頁數 scope.calcPages = function () { //計算總頁數 scope.conf.totalPage = Math.ceil(scope.conf.total / scope.conf.pageSize); //生成快捷頁碼 if (scope.conf.currentPage > 1 && scope.conf.currentPage < scope.conf.totalPage) { scope.conf.pages = [ scope.conf.currentPage - 1, scope.conf.currentPage, scope.conf.currentPage + 1 ]; } else if (scope.conf.currentPage == 1 && scope.conf.totalPage > 1) { scope.conf.pages = [ scope.conf.currentPage, scope.conf.currentPage + 1 ]; } else if (scope.conf.currentPage == scope.conf.totalPage && scope.conf.totalPage > 1) { scope.conf.pages = [ scope.conf.currentPage - 1, scope.conf.currentPage ]; } }; //指令加載完后立即查詢 scope.query(); } }; }]);
為了代碼集中一點, 我把ajaxservice定義在了內部. 指令基本包含分頁所需功能,且不需修改, 下次就可以直接引用.應用
index.html
示例代碼中, list參數是雙向綁定的列表數據, businesses就是頁面table綁定的ng-repeat循環的列表集合, url是后臺接口, event是事件名, method是接口方法,GET or POST, request-param就是請求參數,request-data就是請求體.
controller.js
//分頁請求參數 $scope.requestParam = {}; //分頁請求對象(模糊查詢時,對象屬性可以為列表數據的字段) $scope.requestData = {}; /** * 廣播通知分頁指令 */ $scope.query = function () { $scope.$broadcast("event-pagination-query-bp", "query"); };
當新增數據或者更新數據后, 可以調用controller里的query方法, 通知指令進行分頁查詢
頁面效果文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50429.html
摘要:指令模板顯示第到第條記錄總共條記錄每頁顯示條記錄指令列表數據接口請求參數請求對象數據事件名外部調用分頁查詢的事件監聽事件服務配置參數加載數據改變頁大小下一頁上一頁加載指定頁 指令html模板 page.html 顯示第 {{(conf.currentPage-1) * conf.pageSize + 1}}...
摘要:通常寫代碼時我們無需主動調用或是因為在外部對我們的回調函數做了包裝。類似的不只是這些事件回調函數,還有等。常量依舊會重復檢查。會檢查中有沒有一個名為的成員。 TL;DR 臟檢查是一種模型到視圖的數據映射機制,由 $apply 或 $digest 觸發。 臟檢查的范圍是整個頁面,不受區域或組件劃分影響 使用盡量簡單的綁定表達式提升臟檢查執行速度 盡量減少頁面上綁定表達式的個數(單次綁定...
摘要:通常寫代碼時我們無需主動調用或是因為在外部對我們的回調函數做了包裝。類似的不只是這些事件回調函數,還有等。常量依舊會重復檢查。會檢查中有沒有一個名為的成員。 TL;DR 臟檢查是一種模型到視圖的數據映射機制,由 $apply 或 $digest 觸發。 臟檢查的范圍是整個頁面,不受區域或組件劃分影響 使用盡量簡單的綁定表達式提升臟檢查執行速度 盡量減少頁面上綁定表達式的個數(單次綁定...
摘要:正文架構概覽正文架構概覽接觸大概一個月吧,期間寫了個項目,趁現在稍微有點時間,來回顧梳理一下。里的模塊,并不等同于項目中的模塊概念。當然,這只是我目前階段的理解。聲明 本系列文章內容梳理自以下來源: Angular 官方中文版教程 官方的教程,其實已經很詳細且易懂,這里再次梳理的目的在于復習和鞏固相關知識點,剛開始接觸學習 Angular 的還是建議以官網為主。 因為這系列文章,更多的會...
摘要:首先,我們需要在入口頁面的中配置根路徑然后創建一個路由模塊路由配置在主模塊中導入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉,定義該路由激活時的樣式類。 剛實習的時候用過AngularJS,那時候真的是連原生JavaScript都不會寫,依樣畫葫蘆做了幾個管理后臺。然后突然換項目了,AngularJS就不寫了,感覺前前后后接觸了一年多的Angula...
閱讀 870·2021-09-02 09:55
閱讀 1495·2019-12-27 12:02
閱讀 1684·2019-08-30 14:24
閱讀 1138·2019-08-30 14:18
閱讀 2750·2019-08-29 13:57
閱讀 2193·2019-08-26 11:51
閱讀 1364·2019-08-26 10:37
閱讀 763·2019-08-23 16:09