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 相关文章推荐
js之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
js跑步算法的实现代码
Dec 04 Javascript
Javascript闭包实例详解
Nov 29 Javascript
js简单倒计时实现代码
Apr 30 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
通过说明与示例了解js五种设计模式
Jun 17 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
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
JS的get和set使用示例
2014/02/20 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
Python编程实现蚁群算法详解
2017/11/13 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
一份Java笔试题
2012/02/21 面试题
美术专业个人自我评价
2014/01/18 职场文书
大二自我鉴定
2014/01/31 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
2015年导购员工作总结
2015/04/25 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Java后台生成图片的完整步骤
2021/08/04 Java/Android
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏