[Angularjs]单页应用之分页
写在前面
在项目中，用到单页应用的分页，当时想到使用滚动加载的方案，可是几次尝试都没配置成功，闲着无聊就弄了一个demo。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-class,ng-class-even,ng-class-odd
一个例子
这里需要用到infinite-scroll，可以去这里下载：http://sroze.github.io/ngInfiniteScroll/index.html
Html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动分页</title>
<meta charset="utf-8" />
<script src="JS/jquery.js"></script>
<script src="JS/angular.js"></script>
<script src="JS/ng-infinite-scroll.js"></script> <script>
var app = angular.module('myapp', ['infinite-scroll']);
app.controller('PersonController', function ($scope, $http) { $scope.data = {
busy: false,
users: [],
page:
};
//加载更多
$scope.loadMore = function () {
//是否正在加载
if ($scope.data.busy) {
return;
}
$scope.data.busy = true;
$http.get("/Service/UserInfo.ashx?page=" + $scope.data.page).success(function (data) {
console.log(data);
for (var i = ; i < data.length; i++) {
$scope.data.users.push(data[i]);
}
});
$scope.data.busy = false;
$scope.data.page++;
}
});
//过滤器
app.filter('toGenderString', function () {
return function (input) {
if (input) {
return '男';
} else {
return '女';
}
};
});
//将json格式的时间转换成一般时间
app.filter('formatDate', function () {
return function (jsondate) {
jsondate = jsondate.replace("/Date(", "").replace(")/", "");
if (jsondate.indexOf("+") > ) {
jsondate = jsondate.substring(, jsondate.indexOf("+"));
} else if (jsondate.indexOf("-") > ) {
jsondate = jsondate.substring(, jsondate.indexOf("-"));
}
var date = new Date(parseInt(jsondate, ));
var month = date.getMonth() + < ? "" + (date.getMonth() + ) : date.getMonth() + ;
var currentDate = date.getDate() < ? "" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate; };
});
</script>
<style type="text/css">
* {
margin: ;
padding: ;
} div {
width: %;
border: 1px solid #0094ff;
text-align: center;
} table {
margin: 3px auto;
border: 0px solid #0094ff;
} td {
height: 30px;
}
</style>
</head>
<body>
<div ng-controller="PersonController"> <div infinite-scroll="loadMore()" infinite-scroll-disabled='data.busy' infinite-scroll-distance=''>
<table cellpadding="" cellspacing="" border="">
<tr><th>序号</th><th>姓名</th><th>创建时间</th><th>性别</th></tr>
<tr ng-repeat="user in data.users">
<td>{{user.ID}}</td>
<td>{{user.Name}} </td>
<td>{{user.CreateDate|formatDate}}</td>
<td>{{user.Gender|toGenderString}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
一般处理程序
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Caching;
using System.Web.Script.Serialization; namespace Wolfy.AngularJs.Service
{
/// <summary>
/// UserInfo 的摘要说明
/// </summary>
public class UserInfo : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
int page = Convert.ToInt32(context.Request["page"]);
int pageSize = ;
context.Response.ContentType = "application/json";
List<Person> lstPersons = null;
var obj = context.Cache.Get("persons");
if (obj == null)
{
lstPersons = new List<Person>();
for (int i = ; i < ; i++)
{
lstPersons.Add(new Person()
{
ID = i + ,
Gender = i % == ? true : false,
Name = "wolfy" + (i + ).ToString()
});
}
context.Cache.Insert(
"persons",
lstPersons,
null,
DateTime.Now.AddSeconds(),
Cache.NoSlidingExpiration,
CacheItemPriority.Low,
CacheItemRemovedCallback);
}
else
{
lstPersons = obj as List<Person>;
} JavaScriptSerializer jss = new JavaScriptSerializer();
//分页
var pageList = lstPersons.Skip(pageSize * (page - )).Take(pageSize);
string json = jss.Serialize(pageList);
context.Response.Write(json);
}
//这个为缓存移除时的回调函数，一定要保持与 Cache.Insert（）方法中的最后一个参数名字一致，
//这里使用了委托，你可以在 Cache.Insert（）这个函数中转定义看到的，所以这里的格式就只能按我写的这种方法签名写。
public static void CacheItemRemovedCallback(string key, object value, CacheItemRemovedReason reason) { } public bool IsReusable
{
get
{
return false;
}
}
}
public class Person
{
/// <summary>
/// 编号
/// </summary>
public int ID { set; get; }
/// <summary>
/// 姓名
/// </summary>
public string Name { set; get; }
/// <summary>
/// 创建时间
/// </summary>
public DateTime CreateDate { set; get; } = DateTime.Now;
/// <summary>
/// 性别，true 男 false 女
/// </summary>
public bool Gender { set; get; } = true; }
}
测试结果
总结
这是在项目中用到一种分页特效，在移动端还是用的比较多的，当时没有弄成功，就弄了一个简单的demo，进行了测试。当然，用个“加载更多”的按钮，也是一种解决方案。
[Angularjs]单页应用之分页的更多相关文章
- 【UGUI】 （三）------- 背包系统（上）之简易单页背包系统及检索功能的实现
背包系统,无论是游戏还是应用,都是常常见到的功能,其作用及重要性不用我多说,玩过游戏的朋友都应该明白. 在Unity中实现一个简易的背包系统其实并不是太过复杂的事.本文要实现的是一个带检索功能的背包系 ...
- [Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作
写在前面 前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片 ...
- [译]用AngularJS构建大型ASP.NET单页应用（一）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 渣 ...
- AngularJS实现单页应用的原理——路由(Route)
AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...
- [译]用AngularJS构建大型ASP.NET单页应用（二）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 客 ...
- [Angularjs]asp.net mvc+angularjs+web api单页应用
写在前面 最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方 ...
- Angular单页应用&AngularJS内部实现原理
回顾 自定义指令 登录后获取登录信息session 首先在登录验证的时候保存一个user 在学生管理页面中运用ajax调用获取到登录的用户信息 对注销按钮添加点击事件:调用ajax在表现层给user赋 ...
- Nodejs之MEAN栈开发（六）---- 用Angular创建单页应用(上)
在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方 ...
- 单页Web应用优缺点
一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...
随机推荐
- 理解SQL Server中的权限体系(上)----主体
原文:http://www.cnblogs.com/CareySon/archive/2012/04/10/mssql-security-principal.html 简介 权限两个字,一个权力,一个 ...
- [Bug]redis问题解决（MISCONF Redis is configured to save RDB snapshots）
redis问题解决(MISCONF Redis is configured to save RDB snapshots) (error) MISCONF Redis is configured t ...
- mousedos网络批量部署xp
小时候对这个东西很好奇,不知道什么原理.一直觉得很好玩.现在研究了下,总结如下 软件的操作步骤很讲究,稍微不慎,则就需要重新来过 知识点: 1,掌握诺顿ghost分区为gh文件 2,学会清理至一个干净 ...
- C语言 文件操作7--文件错误处理
//文件错误处理 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include&l ...
- JS原生父子页面操作
var api = frameElement.api; //当前 W = api.opener;//父页面 W.setPerSel(jsonStr); api.close(); //关闭窗口 js操 ...
- U3D事件系统总结
事件系统有三个要素:发送者,接收者, 转发者. 发送者有两种,一是相机,二是画布.发送者是事件的管理者,发起者,它们使用射线发射器来检测点击事件: 相机的physics Raycaster. 画面的C ...
- [转]SRTM、ASTER GDEM等全球数字高程数据（DEM）下载方式简介
之前写过一篇短文对比过几种数字高程数据的区别:5种全球高程数据对比,这篇文章简要介绍下如何下载这些数据. 1.DLR的数字高程数据.该数据也是SRTM(shuttle radar topo ...
- GEOS库的学习之二:简单几何图形的创建
几何图形(Geometry)是geos里面基本的操作对象,因此Geometry类就是最重要的一个类 几何图形中主要有三个要素:点,线,面.横纵坐标构成点,多个点构成线,环线构成面,点线面混合构成几何集 ...
- Django1.8教程——从零开始搭建一个完整django博客（三）
这一节主要介绍对数据库的访问操作:通过管理器(manage),对对象进行检索.修改.删除等操作,详细介绍了如何针对不同的模型自定义管理器. 查询和管理工作 现在,我们已经有了一个功能完善的Django ...
- unity3d 纹理动画
不知道大家有没有玩过赛车游戏 赛车游戏的跑道有路标,如下图 玩过赛车游戏的都知道,大多数赛车游戏的路标是会动的,如上图,它会从右往左运动 不会发动态图,大家脑补一下吧 没有玩过赛车游戏的也不要紧,大家 ...