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 ...
随机推荐
- 对Primary-backup分布式数据库分布式一致性的猜想
昨天读了paxos算法,心里对分布式一致性有一些想法:如果是我,应该怎么实现数据库集群的一致性呢? paxos算法本身并没有提到其应用,所以实际使用情况应该较复杂.而我平时接触到使用分布式一致性算法的 ...
- 什么时候使用NO_UNNEST
select * from test a where object_id in (select department_id from hr.dept_1 dept where department_i ...
- 【细说Java】Java变量初始化顺序
Java的变量初始化顺序,对这里一直似懂非懂,面试的时候也经常被问到,但答的一直不好,现在整理记录一下,以后忘记了可以来看看. 程序分为两个部分,第一个部分不考虑继承,第二个部分考虑继承: (1)不考 ...
- sicily 4378 connected components in undirected graph
题意:求图中的连通块数,注意孤立的算自连通! 例如:6个顶点3条路径,其中路径为:1->2 4->5 1->3 那么有(1-2&&1->3) + (4- ...
- MKMapView and Zoom Levels: A Visual Guide
原帖:http://troybrant.net/blog/2010/01/mkmapview-and-zoom-levels-a-visual-guide/ So, how exactly does ...
- WPF中判断组合键
1.写在主窗口,private void window_KeyDown(object sender, KeyEventArgs e) 事件中,2.如果是弹出窗口,那么在生成弹出窗口的代码中frm.Ke ...
- (转)Maven实战（二）构建简单Maven项目
上一节讲了maven的安装和配置,这一节我们来学习一下创建一个简单的Maven项目 1. 用Maven 命令创建一个简单的Maven项目 在cmd中运行如下命令: mvn archetype:gene ...
- 利用TreeSet给纯数字字符串排序
import java.util.Iterator;import java.util.TreeSet; /* * 给字符串中的数字排序 * String str = "10,2,11,1,3 ...
- Eclipse颜色主题插件-Eclipse Color Theme
Eclipse颜色主题插件-Eclipse Color Theme 由于看烦了eclipse自带的的配色方案,自己动手配置又太麻烦,无意间在 http://eclipsecolorthemes.org ...
- Tooltip(提示框)组件
一．加载方式 //class加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class=&quo ...