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 ...
随机推荐
- API认证方法一览
Open api authentication Amazon DigitalOcean Webchat Weibo QQ Amazon Web Services HMAC Hash Message A ...
- Mac下Sublime Text 3安装配置
1.下载Sublime Text 3 2.安装Package Control,参考 快捷键 control + ` 或者菜单栏选择View > Show Console 在控制台输入: impo ...
- npm 模块安装机制简介
npm 是 Node 的模块管理器,功能极其强大.它是 Node 获得成功的重要原因之一. 正因为有了npm,我们只要一行命令,就能安装别人写好的模块 . $ npm install 本文介绍 npm ...
- Github开源Java项目（Disconf）上传到Maven Central Repository方法详细介绍
最近我做了一个开源项目 Disconf:Distributed Configuration Management Platform(分布式配置管理平台) ,简单来说,就是为所有业务平台系统管理配置文件 ...
- (转)20 个大大节省你时间的 HTML5 开发工具
Rendera 如果你希望有个环境可以测试.浏览和体验各种不同的 CSS/HTML 和 JavaScript 代码,Rendera 为你提供了实时的运行结果.类似 RunJS. Patternizer ...
- 10、Cocos2dx 3.0游戏开发找小三之容器篇：Vector、Map、Value
重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27705613 容器 3.0版本号之前Cocos2d- ...
- 程序员实用的 MySQL sql 语句
这儿只讲究实用, 程序员编程时常用到的 MySQL的 sql语句(不包括基本的 select, update, delete 等语句). 1. 添加一个用户build,并赋予所有权限的命令 gran ...
- C程序设计的抽象思维-算法分析-大多数元素
[问题] 请编写下面函数 int MajorityElement(int array[],int n); 该函数返回数组array中的多数元素.多数元素是指在占绝对多数(至少51%)的一个值.假设多数 ...
- ProtoBuf 的java使用
碰巧用到Proto,算是笔记吧算是笔记吧, windows : 1,两个文件:proto.exe, protobuf-java-2.4.1.jar 2,建立一个工程TestPb,在下面建立一个pro ...
- Append加载动态轮播
前几天遇到了些小麻烦,不过很快就解决了.之所以要记下来是因为作为一名前端的程序员,要理解页面的加载顺序是最重要的.要不然自己写程序意外的出现bug~~ 刚开始写利用Append的时候,利用火狐的fir ...