[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 ...
随机推荐
- Adivisor
1.Adivisor是一种特殊的Aspect,Advisor代表spring中的Aspect 2.区别:advisor只持有一个Pointcut和一个advice,而aspect可以多个pointcu ...
- 【WPF】FillRule
获取或设置如何组合此 GeometryGroup 中所包含对象的相交区域. Dependency property identifier field: FillRuleProperty FillRul ...
- [转]curl_multi 实现准多进程发请求
FROM : http://blog.sina.com.cn/s/blog_515b90d00100jtnv.html curl_multi函数族:curl_multi_closecurl_multi ...
- .Net 内存溢出（System.OutOfMemoryException）的常见情况和处理方式总结
.Net 内存溢出(System.OutOfMemoryException)的常见情况和处理方式总结 在什么情况下会出现OutOfMemonryException呢? 在我们试图新建一个对象时,而垃圾 ...
- 解决SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问的方法
1.开启Ad Hoc Distributed Queries组件,在sql查询编辑器中执行如下语句: reconfigure reconfigure 2.关闭Ad Hoc Distributed Qu ...
- [转]World Wind学习总结一
WW的纹理,DEM数据,及LOD模型 以earth为例 1． 地形数据: 默认浏览器纹理数据存放在/Cache/Earth/Images/NASA Landsat Imagery/NLT Landsa ...
- 从0开始学Java——eclipse下运行servlet程序警告：Setting property 'source' to 'org.eclipse.jst.jee.server:类名' did not find a matching property.
在使用Eclipse 创建第一个 Servlet之后,并且配置好了tomcat,然后Run on server的之后,提示标题所示错误: 警告: [SetContextPropertiesRule]{ ...
- 20145222黄亚奇《Java程序设计》第6周学习总结
教材学习内容总结 第十章 Java将输入/输出抽象化为串流,数据有来源及目的地,衔接两者的是串流对象. 从应用程序角度来看,如果要将数据从来源取出,可以使用输入串流,如果要将数据写入目的地,可以使用输 ...
- [MCSM]Exponential family: 指数分布族
Exponential family(指数分布族)是一个经常出现的概念,但是对其定义并不是特别的清晰,今天好好看了看WIKI上的内容,有了一个大致的了解,先和大家分享下.本文基本是WIKI上部分内容的 ...
- Orchard基本概念
本文链接:http://www.cnblogs.com/souther/p/4531273.html Orchard是个CMS(这不是废话么),它的首要目标是帮助你从现有的碎片建设网站.这些碎片大小不 ...