angular中注入依赖(分页功能)。。。

js部分：

(function () {'use strict';myapp.config(function($controllerProvider) {$controllerProvider.register('achievementPage', {deps: ["style.css"],init: function (app) {app.compileProvider.directive('achievementPage', [function () {return {restrict: 'AE',replace: true,templateUrl: "template.html",scope: {getList: "=?",pages: "=?"},link: function ($scope, element, attrs) {var coverOption = {total: 0,perPage: 10,currentPage: 1,maxSize: 5,list: [5, 10, 20, 30],},interfaceOption = {reset: function (get) {this.perPage = 10;this.currentPage = 1;get && this.get();},switchPerPage: function (perPage) {if (this.perPage == perPage) return;this.perPage = perPage;this.currentPage = 1;this.get();},change: function (page) {this.get();},get: function () {angular.isFunction($scope.getList) && $scope.getList({limit: this.perPage,offset: (this.currentPage - 1) * this.perPage,page: this.currentPage});}};if (!$scope.pages) $scope.pages = {};angular.extend($scope.pages, coverOption, $scope.pages, interfaceOption);}};}]);}});
})
}());

html部分：

<div class="achievement-page-directive clearfix"><ul class="pull-right" paginationboundary-links="true"total-items="pages.total"items-per-page="pages.perPage"ng-model="pages.currentPage"max-size="pages.maxSize"previous-text="上一页"next-text="下一页"first-text="第一页"last-text="最后一页"rotate="false"ng-change="pages.change(pages.currentPage)"></ul><div class="dropup pull-right item"><div class="dropdown-toggle cloud-pointer" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">每页显示{{pages.perPage}}条数据 <span class="caret"></span></div><ul class="dropdown-menu"><li><a href="javascript:void(0);" ng-repeat="num in pages.list" ng-click="pages.switchPerPage(num)">每页显示{{num}}条数据</a></li></ul></div><div class="item pull-right">共{{pages.total}}条数据</div>
</div>

css部分：

.achievement-page-directive .item {margin-top: 26px;margin-right: 15px;
}
.achievement-page-directive .dropup {cursor: pointer;
}
.achievement-page-directive .dropup .dropdown-toggle:hover {opacity: .8;
}

最终结果：

angular中注入依赖(分页功能)。。。相关推荐

Angular 中的依赖注入link
Angular 中的依赖注入link 依赖注入(DI)是一种重要的应用设计模式. Angular 有自己的 DI 框架,在设计应用时常会用到它,以提升它们的开发效率和模块化程度. 依赖,是当类需要执行 ...
JAVA如何处理上一篇下一篇,Java中如何实现分页功能
Java中如何实现分页功能时间:2017-10-10 来源:华清远见Java培训中心内容多了,我们就会想要去做分页,既能提升用户体验,又减少页面体积,提升加载速度.那么Java中怎么实现分 ...
angular中的依赖注入
依赖项是指某个类执行其功能所需的服务或对象.依赖项注入(DI)是一种设计模式,在这种设计模式中,类会从外部源请求依赖项而不是创建它们. Angular 的 DI 框架会在实例化某个类时为其提供依赖.你 ...
sql server和mysql分页查询_sql server和mysql中分别实现分页功能
MySQL 在MySQL中,可以用 Limit 来查询第 m 列到第 n 列的记录, 例如: select * from tablename limit m, n sql="select * ...
SqlServer中使用Mysql中的limit分页功能
子查询得到逆序排列的前PageIndex*PageSize条记录,然后把这PageIndex*PageSize条记录按正序排列得到前PageSize条记录.OK了,这里的前PageSize条记录,实际 ...
如何在vue中使用表格分页功能
直接上代码: 这里是这里是template部分,主要由一个需要分页的表格和一个分页器组成.重点在于表格的data属性用到了一个slice截取方法. <el-tablev-loading=&quo ...
理解AngularJS中的依赖注入
作者 CraftsCoder 冷月无声 - 博客频道 - CSDN.NET http://blog.csdn.net/jaytalent/article/details/50986402 本文结合一些 ...
SAP Spartacus 中的依赖注入 Dependency Injection 介绍
先了解 Angular 中的依赖注入依赖项是指某个类执行其功能所需的服务或对象.依赖项注入(DI)是一种设计模式,在这种设计模式中,类会从外部源请求依赖项而不是让类自己来创建它们. Angular ...
复习JavaWeb的小项目书籍信息的增删改查分页功能实现Java面试题Session和Cookie的基础概念生活【记录一个咸鱼大学生三个月的奋进生活】034
记录一个咸鱼大学生三个月的奋进生活034 JavaWeb的增删改查分页功能实现前期准备工作(数据库连接类和实体类) 数据库建立数据库连接类(DBManager) 书籍信息的实体类(Book) 操作 ...

angular中注入依赖(分页功能)。。。

angular中注入依赖(分页功能)。。。相关推荐

最新文章

热门文章