热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

angular分页指令操作

这篇文章主要为大家详细介绍了angular分页指令操作的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令。直接贴代码,详情如下:

index.html


  
{{l.time}}

index.js

var app = angular.module("doSBill",[]);

app.controller("map_ctrl",function($scope,$http,$location,$timeout){ 
  // 原始数据
  $scope.dataList=[
  {'time':1},{'time':2},{'time':3},{'time':4},{'time':5},{'time':6},{'time':7},{'time':8},{'time':9},{'time':10},
  {'time':11},{'time':12},{'time':13},{'time':14},{'time':15},{'time':16},{'time':17},{'time':18},{'time':19},{'time':20},
  {'time':21},{'time':22},{'time':23},{'time':24},{'time':25},{'time':26},{'time':27},{'time':28},{'time':29},{'time':30},
  {'time':31}
  ];
  //$on:监听或接收数据;此处用于监听分页指令,修改的列表视图数据
  $scope.$on("orderList", function(e, orderList){
   $scope.orderList = orderList;
  });

}); 

 指令模板  page.html

总记录数: 本页记录数: / 到第

指令定义page.js

app.directive('rjDate',function(){
    return {
      restrict: 'EA',  
      replace: false,
      scope : {dataList:'=datalist'},//设置scope.dataList与指令属性“datalist”值绑定,详情看指令scop作用域      
      templateUrl: 'pageDirective/template/page.html',  
      link: function(scope,elem,attr){

        var page={};//分页对象
        scope.page=page;
        scope.page.OnePageNums=10; //每页记录数
        scope.page.nums=0;
        scope.page.now=1;
        scope.page.nowNums=0;
        scope.page.pageCount=1;
        scope.getPage=getPage; //设置获取页面的ng-click
        scope.page.orderList=[];

        getPage(1,scope.dataList);//初始化获取第一页数据

        scope.jumpPage=function(page,dataList){    
          if(!parseInt(page)){
           return null;
          }
          getPage(page,dataList);
         }
        function getPage(pageNow,dataList){//获取指定的页面     
           scope.page.nums=dataList.length; //设置总记录数
           scope.page.now=pageNow;//设置当前是第几页
           pagination();//设置当前有多少页面 生成一个页面数组
           scope.page.orderList=getOnePage(dataList);//获取一页的数据
           scope.$emit("orderList", scope.page.orderList);//$emit:子传父,传递event与data;此处用于给父controller传递数据orderList  
        }
        
        function getOnePage(arr){//获取一页的数据
          if(arr==null){           
           return null;
          } 
          var newarr=new Array();
          if(scope.page.now<1){
            scope.page.now=1;
          }
          if(scope.page.now>scope.page.pageCount){
            scope.page.now=scope.page.pageCount;
          }
          scope.page.nowNums=scope.page.onePageNums;
          var pagenow=scope.page.now; 

          var begin=(pagenow-1)*scope.page.onePageNums;                 
          var end=begin+scope.page.onePageNums;
          var lens=scope.page.nums;

          if(end>lens){
            end=lens;
            scope.page.nowNums=lens-begin;
          }
                
          for(begin;begin

 效果如图所示:

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


推荐阅读
  • 利用Charles工具进行移动设备网络监控
    本文介绍了如何通过配置Charles代理软件来实现对移动设备的网络请求进行监控和调试,适用于开发者或测试人员需要检查移动应用网络通信的情况。 ... [详细]
  • 调试方法:【dll工程和调用dll的exe工程在同一个解决方案中】dll工程,属性-配置属性-调试-把命令为调用该dll的exe工程的bin\Debug ... [详细]
  • 本文探讨了缓存系统中的两个关键问题——缓存穿透与缓存失效时的雪崩效应,以及这些问题的解决方案。此外,文章还介绍了数据处理、数据库拆分策略、缓存优化、拆分策略、应用架构演进及通信协议的选择等内容。 ... [详细]
  • 如何获取php脚本路径(2023年最新解答)
    如何获取php脚本路径(2023年最新解答) ... [详细]
  • Python面向对象编程入门(十二):深入理解类与实例
    本文详细介绍了Python中的新式类与经典类的区别,包括类的定义、实例化过程、方法调用机制、类属性的使用及查看方式等内容,并通过具体示例展示了如何创建和使用类。 ... [详细]
  • 本文介绍如何使用JavaScript确保用户输入的日期不会超过当前系统的实际日期,通过示例代码展示实现方法。 ... [详细]
  • vue基础——表单输入绑定
    一、基础用法你可以用v-model指令在表单及元素上创建双向数据绑定。它会根据控件类型自动选择正确的方法来更新元素。尽管有些神奇,但 ... [详细]
  • HQChart 是首个将传统的PC端股票客户端(C++)移植至 jspy 平台的项目,支持 K 线图和麦语言(分析家语法)指标计算。此次更新主要增加了通达信集合竞价图等功能。 ... [详细]
  • 本文将深入探讨HTML5 Canvas API中实现图形旋转的具体方法,包括中心旋转和参考点旋转两种常见方式,为Web开发者提供实用的技术指导。 ... [详细]
  • Codeforces Round #360 - The Values You Can Make
    题目描述:给定一组数字,首先选择一些子序列,使其和等于k;然后从所有和为k的子序列中再次选择子序列,计算这些子序列的和的所有可能值,并按升序输出。 ... [详细]
  • 本文探讨了Java异常处理的本质,提出了设计模式以优化异常处理,并分析了在AOP模型中异常处理的应用。文章强调了正确使用Java异常对于提升代码质量和维护性的关键作用。 ... [详细]
  • HTTP(超文本传输协议)是互联网上用于客户端和服务器之间交换数据的主要协议。本文详细介绍了HTTP的工作原理,包括其请求-响应机制、不同版本的发展历程以及HTTP数据包的具体结构。 ... [详细]
  • NetCat,因其强大的多功能性和灵活性,被网络安全领域的专业人士誉为‘瑞士军刀’。本文将详细介绍NetCat的功能、应用场景及其在不同平台上的使用方法。 ... [详细]
  • SQL Server中查询表结构与视图的方法,便捷高效
    本文介绍如何在SQL Server中轻松查询表结构和视图,提供简洁高效的SQL语句,特别适用于开发人员。 ... [详细]
  • 本文介绍如何创建一个简单的Android桌面小部件,通过显示两个文本框来展示基本功能。提供代码下载链接及详细步骤。 ... [详细]
author-avatar
可爱的天使keven_464
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有