[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 ...
随机推荐
- PHP mcrypt加密扩展使用总结
在开发中,很多时候我们在前后端交互中需要对一些敏感数据进行一定的加密.PHP中有提供了mcrypt的这样一个加密扩展实现对数据的加密解密. 一.mcrypt扩展的安装 在低版本的PHP中需要在配置文件 ...
- f2fs解析（三）NAT中如何区分inode和其他dnode
首先,我们要知道NAT中的每个表项都对应着MAIN AREA区域中NODE段的一个block,还要知道NODE block很特别,block末尾会有一个node footer结构: 243 struc ...
- 07Mybatis_入门程序——根据前面的做的两个查询联系，做一些小的总结
总结如下: 1.parameterType和resultType 在映射文件中通过parameterType指定输入 参数的类型. 在映射文件中通过resultType指定输出结果的类型. 例如: & ...
- 关于js中onclick字符串传参问题
规则: 外变是“”,里面就是‘’外边是‘’,里边就是“” 示例: var a="111"; var html="<a onclick='selecthoods( ...
- es2自动发现插件
https://www.elastic.co/guide/en/elasticsearch/plugins/current/discovery-multicast-usage.html http:// ...
- [原创]JavaScript继承详解
原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...
- Firefox扩展开发
Firefox扩展开发 (插件开发) Extension开发 入门教程 5步走 五步走 首先需要知道什么是"Firefox插件".这里说的"插件"只是一个通 ...
- ant命令总结
ant命令总结 博客分类: 版本管理 svn , maven , ant ant命令总结 1 Ant是什么? Apache Ant 是一个基于 Java的生成工具. 生成工具在软件开发中用来将源 ...
- EF实体框架之CodeFirst五
上一博客学习了下基本的约定配置,留下几个遗漏的,这篇就是学习下遗漏一复杂类型. 一.什么是复杂类型? 书中说道:“复杂类型也可视作值类型(?)可以作为附加属性添加到其他类.复杂类型与实体类型的区别在于 ...
- sql server 2008 数据库的完整性约束
一.数据库完整性概述 1.数据库的完整性: ①数据库的完整性是指数据的正确性和相容性 ②数据库完整性是防止不合语义或不正确的数据进入数据库 ③完整性体现了是否真实地反映现实世界 例: 学 ...