营销导向的企业网站优化,天元建设集团有限公司滨州分公司,微孝感网站建设,怎么设置微信公众号前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它#xff0c;当然ng也不例外#xff0c;在学习ng前我第一个想做的demo就是基于ng实现分页#xff0c;除去基本的计算思路外就是使用指令封装成一个插件#xff0c;在需要分页的列表页面内直接引用。 插件 在封装分页…前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它当然ng也不例外在学习ng前我第一个想做的demo就是基于ng实现分页除去基本的计算思路外就是使用指令封装成一个插件在需要分页的列表页面内直接引用。 插件 在封装分页插件时我实现了几种方式总体都比较零散最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件觉还不错读了下他的源码就直接在项目中使用了。 原理和使用说明 1、插件源码主要基于angular directive来实现。 2、调用时关键地方是后台请求处理函数也就是从后台取数据。 3、插件有两个关键参数currentPage、itemsPerPage当前页码和每页的记录数。 4、实现方法调用后我们需要根据每次点击分页插件页码时重新提交后台来获取相应页码数据。 在调用的页码中我使用了$watch来监控。 我初次使用时是把调用函数放在了插件的onchange中结果发现每次都会触发两次后台。这个地方需要注意。 5、我把请求后台封装成了Service层然后在Controller里调用也符合MVC思想。 效果图 调用代码 div ng-appDemoApp ng-controllerDemoControllertable classtable table-stripedtheadtrtdID/tdtdFirstName/tdtdLastName/tdtdStatus/tdtdAddress/td/tr/theadtbodytr ng-repeatemp in personstd{{emp.ID}}/tdtd{{emp.FirstName}}/tdtd{{emp.LastName}}/tdtd{{emp.Status}}/tdtd{{emp.Address}}/td/tr/tbody/tabletm-pagination confpaginationConf/tm-pagination
/div
script typetext/javascriptvar app angular.module(DemoApp, [tm.pagination]);app.controller(DemoController, [$scope, BusinessService, function ($scope, BusinessService) {var GetAllEmployee function () {var postData {pageIndex: $scope.paginationConf.currentPage,pageSize: $scope.paginationConf.itemsPerPage}BusinessService.list(postData).success(function (response) {$scope.paginationConf.totalItems response.count;$scope.persons response.items;});}//配置分页基本参数$scope.paginationConf {currentPage: 1,itemsPerPage: 5};/***************************************************************当页码和页面记录数发生变化时监控后台查询如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。 ***************************************************************/$scope.$watch(paginationConf.currentPage paginationConf.itemsPerPage, GetAllEmployee);}]);//业务类app.factory(BusinessService, [$http, function ($http) {var list function (postData) {return $http.post(/Employee/GetAllEmployee, postData);}return {list: function (postData) {return list(postData);}}}]);
/script插件和Demo下载 http://yunpan.cn/cQEhnLrpnkniQ 访问密码 be74转载于:https://www.cnblogs.com/sword-successful/p/4605222.html
