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 ...
随机推荐
- ViewPager的使用方法和实现过程
布局文件里添加viewPager布局 <android.support.v4.view.ViewPager android:id="@+id/search_viewpager" ...
- 为什么选择Premium Fabric Shanghai
展商首页 为什么选择Premium Fabric Shanghai
- Java继承与清理
[程序实例] import java.util.*; class Characteristic { private String s; Characteristic(String s) { this. ...
- ORACLE REFERENCES FRO TEST
[JSU]LJDragon's Oracle course notes In the first semester, junior year Oracle考前复习 试题结构分析: 1.选择题2x10, ...
- 让 Dreamweaver 支持 Emmet（原ZenCoding）
注:目前暂不支持 DW CC,期待作者早是更新.Update:2013/10/12 鉴于某些原因,每个 Coder 所钟爱的 IDE 各不相同.而作为一个软件爱好者,我几乎所有 IDE 都使用过一段时 ...
- HDU 4099 Revenge of Fibonacci （数学+字典数）
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4099 这个题目就是一个坑或. 题意:给你不超过40的一串数字,问你这串数字是Fibonacci多少的开头 ...
- 常用的JS数据类型转换方法
JS 数据类型转换的方法有以下3种:1)使用转换函数2)强制类型转换3)利用js变量弱类型特性进行转换 1:js提供了parseInt()和parseFloat()这两个转换函数. 这里输入内容par ...
- CentOS6.7 用户
1.添加普通用户[root@server ~]# useradd chenjiafa //添加一个名为chenjiafa的用户[root@server ~]# passwd chenjiafa ...
- Android推送等耗电原因剖析
原文链接:http://www.jianshu.com/p/584707554ed7 Android手机有两个处理器,一个是Application Processor(AP)基于ARM处理器,主要运行 ...
- 打开局域网项目，显示“项目位置不受信任”的解决办法(VS2008)
弄了几天,网上搜了个遍,愣是解决不了,绝望的时候闭着眼睛胡搞,居然解决了,哈哈.... 开发环境:visual studio 2008 项目位置:局域网其他电脑内 出现问题: 1.弹出“”的对话框,如 ...