闲来没事,分享下项目中自己写的分页组件。来不及了,直接上车。

效果:

输入框可任意输入,并会自动提交到该页

依赖项:

fontawesome,bootstrap

html:

<ul class="page clearfix">
<li ng-hide="currentPage <= 1">
<a href="" ng-click="firstPage()">
<i class="fa fa-step-backward"></i>
</a>
<a href="" ng-click="prePage()">
<i class="fa fa-play fa-flip-horizontal"></i>
</a>
</li>
<li>
<span>页码</span>
<input type="text" ng-model="currentPage">/
<span ng-bind="totalPage"></span>
</li>
<li ng-hide="currentPage >= totalPage">
<a href="" ng-click="nextPage()">
<i class="fa fa-play"></i>
</a>
<a href="" ng-click="lastPage()">
<i class="fa fa-step-forward"></i>
</a>
</li>
</ul>

css:

/* 分页 */
.page {
margin: 15px 0;
padding:;
float: right;
}
.page li {
list-style: none;
float: left;
height: 30px;
line-height: 30px;
}
.page li input {
padding: 3px 5px;
height: 100%;
width: 50px;
border: none;
background-color: #EAEEF1;
text-align: center;
margin-right: 10px;
}
.page li span {
margin-right: 15px;
}
.page li a {
text-decoration: none;
outline: none;
margin-right: 15px;
}

directive:

App.directive('paging', function() { // 分页
return {
restrict: 'A',
replace: true,
scope: {
totalPage: '=totalPage',
currentPage: '=currentPage',
getData: '&getData'
},
templateUrl: 'app/views/partials/paging.html',
controller: function($scope) { $scope.firstPage = function() { $scope.currentPage = 1; }
$scope.lastPage = function() { $scope.currentPage = $scope.totalPage; }
$scope.prePage = function() { $scope.currentPage--; }
$scope.nextPage = function() { $scope.currentPage++; } $scope.$watch('currentPage', function(newVal, oldVal) {
if(newVal != oldVal && newVal) $scope.getData();
})
}
};
});

参数:

totalPage: 总页数,
currentPage: 当前页,
getData: 点击分页所触发的函数 用法: controller:
$scope.current_page = 1; // 当前页
$scope.getData = function() {
$scope.param.page = $scope.current_page;
ConnectApi.start('post', 'index/student/getschoolclasslist', $scope.param).then(function(response) { // 这个ConnectApi 你大可不必关心,这是我封装的http函数
var data = ConnectApi.data({ res: response, _index: index });
$scope.data = data.data;
$scope.totalpage = data.data.total_page; // 服务器端返回的总页数
}
}
$scope.getData(); // 获取数据的函数
html:
<div paging total-page="totalpage" current-page="current_page" get-data="getData()"></div>
												

angularjs使用directive实现分页组件的更多相关文章

  1. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

  2. AngularJS之directive

    AngularJS之directive AngularJS是什么就不多舌了,这里简单介绍下directive.内容基本上是读书笔记,所以如果你看过<AngularJS up and runnin ...

  3. angularjs自定义指令实现分页插件

    由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能.现在单独做了个简易的小demo,主要是为了分享自己写的分页功能.注:本实例调用的 ...

  4. angular自定义分页组件(实用)

    功能描述:分页,点击按钮或者下一页获取分页接口,同时active到对应页码. html模块: <page page-count="totalPage" on-click-pa ...

  5. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  6. angular-ui分页组件

    http://angular-ui.github.io/bootstrap/#/pagination 分页组件只提供生成分页按钮,数据的显示需要使用ng-repeat, 注意设置 items-per- ...

  7. asp.net mvc4+mysql做一个简单分页组件(部分视图)

    在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...

  8. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

  9. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

随机推荐

  1. C#复习,输入学生信息排列成绩

    C#复习:在控制台程序中使用结构体.集合,完成下列要求项目要求:一.连续输入5个学生的信息,每个学生都有以下4个内容:1.序号 - 根据输入的顺序自动生成,不需要手动填写,如输入第一个学生的序号是1, ...

  2. Web分析日志分析2

    http://www.docin.com/p-649515490.html http://wenku.baidu.com/link?url=kB-83fbl1Zc3Y6U2BYLj-lKMWShe8Z ...

  3. Keil uVISION2 自学教程

    Keil  uVISION2  是众多单片机应用开发软件中优秀的软件之一,它支持众多不同公司的 MCS-51 架构的芯片,它集编辑,编译,仿真等于一体,同时还支持.PLM.汇编和 C 语言的程序设计, ...

  4. MySQL全连接(Full Join)实现,union和union all用法

    MySQL本身不支持你所说的full join(全连接),但可以通过union来实现 ,下面是一个简单测试,可以看看: mysql> CREATE TABLE a(id int,name cha ...

  5. 【转】Android Studio安装配置学习教程指南 Gradle基础--不错

    原文网址:http://www.linuxidc.com/Linux/2015-02/113890p4.htm 其实很早之前也写了一篇Gradle的基础博客,但是时间很久了,现在Gradle已经更新了 ...

  6. 【动态规划】HDU 1081 & XMU 1031 To the Max

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1081 http://acm.xmu.edu.cn/JudgeOnline/problem.php?i ...

  7. T-SQL中return 返回语句学习

    return命令用于结束当前程序的执行,返回到上一个调用它的程序或其他程序,其语法格式如下: return   整数值或变量 return语句要指定返回值,如果没有指定返回值,SQL Server系统 ...

  8. jqGrid中多选

    原文地址;http://www.cnblogs.com/josechuanmin/archive/2013/05/19/3087138.html 在jqGrid中设置multiselect: true ...

  9. supervisor:进程管理工具

    一,安装(任何一种方式) apt-get install supervisor easy_install supervisor pip install supervisor 二,配置 配置superv ...

  10. jquery trigger传值

    方法1: var e = $.Event('ok.menu.table', { relatedTarget: $el }) that.$el.trigger(e); 接受方法如下.此时,related ...