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


Posted in Javascript onFebruary 07, 2017

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

效果:

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

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

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript入门基础之私有变量
Feb 23 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
简谈创建React Component的几种方式
Jun 15 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
Bootstrap下拉菜单样式
Feb 07 #Javascript
基于JavaScript实现购物车功能
Feb 07 #Javascript
js实现类bootstrap模态框动画
Feb 07 #Javascript
canvas实现探照灯效果
Feb 07 #Javascript
javascript数据类型详解
Feb 07 #Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 #Javascript
vuejs指令详解
Feb 07 #Javascript
You might like
中国的第一台收音机
2021/03/01 无线电
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
常用PHP框架功能对照表
2014/10/23 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python学生信息管理系统修改版
2018/03/13 Python
python 动态调用函数实例解析
2019/10/21 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
联谊活动策划书
2014/01/26 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
职工小家建设活动方案
2014/08/25 职场文书
2014年防汛工作总结
2014/12/08 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书