angular+bootstrap分页指令案例
AngularJS中不仅内置了许多指令，而且开发人员也可以通过自定义指令来完成特殊操作，指令创建成功后可以到处复用。
Web应用中的分页处理最为常见，我们可以将分页模块编写成一个可以复用的Angular指令，在使用时无需考虑指令的内部实现细节，像使用普通HTML元素一样简单。
1：index.html
<!DOCTYPE html> <html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.css"/>
</head>
<body> <div class="container" ng-controller="PageCtrl">
<pagination num-pages="pages" curr-page="page" on-select-page="selectPage(page)"></pagination>
</div> </body> <script src="../js/angular.js"></script>
<script src="index.js"></script>
</html>
分页指令的使用如下：
<pagination num-pages="pages" curr-page="page" on-select-page="selectPage(page)"></pagination>
index.js
var myApp = angular.module('myApp', []);
myApp.controller('PageCtrl',['$scope', function($scope){
$scope.pages = 10;
$scope.page = 1;
$scope.selectPage = function(page){
console.log("选择的页："+page);
};
}]);
myApp.directive('pagination', function(){
return {
restrict: 'E',
scope: {
numPages: '=',
currPage: '=',
onSelectPage: '&'
},
template: '<ul class="pagination">'
+'<li ng-class="{disabled: noPreviousPage()}">'
+'<a ng-click="selectPreviousPage()">上一页</a>'
+'</li>'
+'<li ng-repeat="page in pages" ng-class="{active: isActivePage(page)}">'
+'<a ng-click="selectPage(page)">{{page}}</a>'
+'</li>'
+'<li ng-class="{disabled: noNextPage()}">'
+'<a ng-click="selectNextPage()">下一页</a>'
+'</li>'
+'</ul>',
replace: true,
link: function(s){
s.$watch('numPages', function(value){
s.pages = [];
for(var i=1;i<=value;i++){
s.pages.push(i);
}
if(s.currPage > value){
s.selectPage(value);
}
});
//判读是否有上一页
s.noPreviousPage = function(){
return s.currPage === 1;
};
//判断是否有下一页
s.noNextPage = function(){
return s.currPage === s.numPages;
};
//判断当前页是否被选中
s.isActivePage = function(page){
return s.currPage===page;
};
//选择页数
s.selectPage = function(page){
if(!s.isActivePage(page)){
s.currPage = page;
s.onSelectPage({ page:page });
}
};
//选择下一页
s.selectNextPage = function(){
if(!s.noNextPage()){
s.selectPage(s.currPage+1);
}
};
//选择上一页
s.selectPreviousPage = function(){
if(!s.noPreviousPage()){
s.selectPage(s.currPage-1);
}
};
}
};
});
3:运行效果如下：
angular+bootstrap分页指令案例的更多相关文章
- angular分页指令
目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令.直接贴代码,详情如下: index.html <body id="sBill" ng-c ...
- Angular简易分页设计(二)：封装成指令
(首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/) 之前我们讲过,Angular分页代码确实不难实现,但是由于在多个路由 ...
- AngularJs angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- Angular - - angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- 使用angular.bootstrap() 完成模块的手动加载
之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <he ...
- AngularJs--angular-pagination可复用的分页指令
1.angular-pagination 是基于angular 编写的可复用分页指令 安装 克隆项目到本地: git clone https://github.com/febobo/angular-p ...
- angular.js分页代码的实例
对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...
- bootstrap分页
使用bootstrap分页插件,如下代码是html代码 <title>分页</title> <link href="page/bootstrap-3.3.5-d ...
- bootstrap 分页
1.背景: 前端页面使用bootstrap分页,同时与搜索条件联动: 2. jsp页面由服务端返回后, 异步请求动态创建表格, 分页的数据由服务端第一次返回后初始化, 以后每次异步请求再更新. jsp ...
随机推荐
- 在SQL Server中使用命令调用SSIS包
在SQL Server中可以使用dtexec命令运行SSIS包(2005以上版本),当然也可以通过系统过程:xp_cmdshell调用dtexec运行SSIS包. 具体操作步骤如下: 1.首先,当然是 ...
- java并发5-volatile关键字解析
http://www.cnblogs.com/dolphin0520/p/3920373.html 一.内存模型的相关概念 大家都知道,计算机在执行程序时,每条指令都是在CPU中执行的,而执行指令过程 ...
- SRM 586 DIV1
A 考虑都是格点 , 枚举所有y+-0.5就行了. trick是避免正好在y上的点重复统计. class PiecewiseLinearFunction { public: int maximumSo ...
- Bootstrap--导航元素
1.标签形导航 2.胶囊型导航: 3.垂直堆叠形导航: 4.导航加下拉菜单: 5.导航列表: 6.可切换的标签导航:
- 【ArcGIS 10.2新特性】地理数据（Geodatabase 和database）10.2 新特性
1. 大数据支持 ArcGIS与Hadoop集成,将提供一个开源的工具包用于大数据的空间分析,开发者将通过该工具包构建定制化的工作流并在ArcGIS当中执行. 支持更多的大数据平台数据 ...
- 用户与 Oracle DB 交互具体过程
与 Oracle DB 交互 以下的演示样例从最主要的层面描写叙述 Oracle DB 操作.该演示样例说明了一种 Oracle DB 配置,在该配置中,用户和关联server进程执行于通过网络连接的 ...
- 百度之星资格赛 hdu 4826 Labyrinth 动态规划
/********************* Problem Description 是一仅仅喜欢探险的熊.一次偶然落进了一个m*n矩阵的迷宫,该迷宫仅仅能从矩阵左上角第一个方格開始走,仅仅有走到右上 ...
- Activity具体解释（生命周期、以各种方式启动Activity、状态保存，全然退出等）
一.什么是Activity? 简单的说:Activity就是布满整个窗体或者悬浮于其它窗体上的交互界面.在一个应用程序中通常由多个Activity构成,都会在Manifest.xml中指定一个主的Ac ...
- PHP字符串的编码问题(转)
大家都知道,不同字符编码,其在内存占用的字节数不一样.如ASCII编码字符占用1个字节,UTF-8编码的中文字符是3字节,GBK为2个字节. PHP 也自带几种字符串截取函数,其中常用到的就是 s ...
- 福昕阅读器drm加密解密总结
drm是数字版权保护的一种方式,前一段时间在做四川文轩数字图书馆项目的时候用到了相关的知识,感觉这东西对于一些在线阅读和视频播放还是有很大用处的. 对于其工作原理我也很好奇,先摘抄度娘的内容如下,当然 ...