angularjs使用directive实现分页组件的示例

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

效果

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

依赖项:

fontawesome,bootstrap

html:

rush:xhtml;">

css:

rush: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:

rush:js;"> 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) {
  $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tPage = function() { $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.currentPage = 1; }
  $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.lastPage = function() { $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.currentPage = $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.totalPage; }
  $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.prePage = function() { $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.currentPage--; }
  $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.nextPage = function() { $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.currentPage++; }

  $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$watch('currentPage',function(newVal,oldVal) {
    if(newVal != oldVal && newVal) $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.getData();
  })
}

};
});

参数:

  • totalPage: 总页数,
  • currentPage: 当前页,
  • getData: 点击分页所触发的函数

用法

controller:

rush:js;"> $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:

rush:js;">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...