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 ...
随机推荐
- Oracle 判断 并 手动收集 统计信息 脚本
CREATE OR REPLACE PROCEDURE SchameB.PRC_GATHER_STATS AUTHID CURRENT_USER IS BEGIN SYS.DBMS_STATS.GAT ...
- c语言内存模型
文章一.C语言的内存分配模型 1.程序代码区:存放函数体的二进制代码. 2.全局区数据区:全局数据区划分为三个区域.全局变量和静态变量的存储是放在一块的,初始化的全局变量和静态变量在一块区域,未初始化 ...
- iOS项目更新之升级Xcode7 & iOS9
金田 前言 Apple 的WWDC所发布内容在给大家带来惊喜之际,给各位iOS开发的同仁却也带来了不同程度的麻烦.首先不讲新功能,就单指原来老版本的项目升级.代码升级,就是一堆问题,而且是不 ...
- android 各种xml的作用
1.arrays.xml 定义数组 <resources> <string-array name="proxy_types"> <item&g ...
- puppet aix之自动化用户管理
一. 用户组的管理 (一) Puppet组管理特性 1. manages_aix_lam 用来管理AIX的LAM(Loadable Authentication Module)系统. 2 ...
- 【Ruby on Rails 学习一】ubuntu14.04配置rvm与ruby
要安装ruby,首先要安装rvm,借助rvm安装ruby rvm 的全称是 Ruby Version Manager ,是一款由 Wayne E. Seguin 开发的一款命令行工具.rvm 能够让 ...
- [C++]memcpy 小记
#include <stdio.h> #include <stdlib.h> #include <string.h> int main () { char a = ...
- 经常使用ARM汇编指令
一面学习,一面总结,一面记录. 以下是整理在网上找到的一些资料,简单整理记录一下,方便以后查阅. ARM处理器的指令集能够分为跳转指令.数据处理指令.程序状态寄存器(PSR)处理指令.载入/存储指令. ...
- acd LCM Challenge(求1~n的随意三个数的最大公倍数)
Problem Description Some days ago, I learned the concept of LCM (least common multiple). I've played ...
- emacs快捷键学习（一）--Linux最强大的编辑器
emacs是一个非常强大的编辑器.经常使用的快捷键总结例如以下: 退出emacs:ctrl+x ctrl+c 移动到下一屏:ctrl+v 移动到上一屏:alt+v 将光标所在行移动到屏幕中间:ctrl ...