angularjs使用directive实现分页组件的示例
更新时间：2017年02月07日 15:19:52 作者：冰果在线
本篇文章主要介绍了angularjs使用directive实现分页组件的示例，具有一定的参考价值，有兴趣的可以了解一下。
闲来没事，分享下项目中自己写的分页组件。来不及了，直接上车。
效果：
输入框可任意输入，并会自动提交到该页
依赖项：
fontawesome，bootstrap
html:
<ul class="page clearfix">
<li ng-hide="currentPage <= 1">
<a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" firstPage()">
<i class="fa fa-step-backward"></i>
</a>
<a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" nextPage()">
<i class="fa fa-play"></i>
</a>
<a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" lastPage()">
<i class="fa fa-step-forward"></i>
</a>
</li>
</ul>
css:
/* 分页 */
.page {
margin: 15px 0;
padding: 0;
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于angular异步验证防抖踩坑的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-12-12
这篇文章主要介绍了AngularJS使用ocLazyLoad实现js延迟加载的相关资料,需要的朋友可以参考下2017-07-07
这篇文章主要为大家介绍了如何通过Angular实现表格自动滚动的效果，文中的示例代码讲解详细，对我们学习Angular有一定帮助，需要的可以参考一下2022-01-01
本篇文章主要介绍了解决AngualrJS页面刷新导致异常显示问题的方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
本文主要给大家介绍基于AngularJS实现页面滚动到底自动加载数据的功能，通过第三方控件来实现，感兴趣的朋友跟着小编一起看看具体实现代码吧2015-10-10
这篇文章主要给大家介绍了关于angular组件间通讯的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angular组件具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-05-05
本篇文章主要介绍了AngularJS 霸道的过滤器小结，在实际操作中，我们需要对统一数据源进行多次转换，本文详细讨论有关过滤器的用法 。2017-04-04
这篇文章主要介绍了AngularJS自定义服务与fliter的混合使用的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了Angular2实现的秒表及改良版,结合实例形式分析 Angular2实现秒表功能的原理、操作技巧与相关注意事项,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了AngularJS 使用 UI Router 实现表单向导 的相关资料,需要的朋友可以参考下2016-01-01
最新评论