angularjs实现分页显示数据库信息_angularjs

angularjs实现分页显示数据库信息_angularjs

ID:30774310

大小:221.00 KB

页数:15页

时间:2019-01-03

angularjs实现分页显示数据库信息_angularjs_第1页
angularjs实现分页显示数据库信息_angularjs_第2页
angularjs实现分页显示数据库信息_angularjs_第3页
angularjs实现分页显示数据库信息_angularjs_第4页
angularjs实现分页显示数据库信息_angularjs_第5页
资源描述:

《angularjs实现分页显示数据库信息_angularjs》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库

1、AngularJS实现分页显示数据库信息接着第一篇《》AngularJS内建服务$location及其功能详解》,进行学习Section2:实现分页显示效果那么再隐身一下,通过location的setter方法设置当前的ur]信息。在这里为了能够让演示看到更好的效果,在这个比较完整的实例中,我引入了angularJS的多路由技术、嵌套的控制器Z间传递数据、scope的继承、http通信、内链接传递变量等。首先建立一个首页模板

2、etacharset二〃UTF-8〃>•turnPageButtonArea{background-color:#f07al3;width:500px;height:30px;line-height:30px;text-align:center;margin:lOpxauto;padding:20px;

3、}button{margin-right:20px;width:lOOpx;height:30px;font-size:15px;}•pagcNum{width:50px;height:23px;text-align:center;body{font-family:微软雅黑;}hl{text-align:center;}.totalPages{color:#ffffff}AngularJSTurnPeigcBy$locationScr

4、vicc

PreviousNcxt〈inputtype二"number,zng-model二〃currentPage"class=,zpageNum,,>Go共{{a

5、llPage}}页〈/span>

通过一些简单的CSS样式将页面的布局修饰了一下。然后在首页的元索里设置了一些ngApp和control1ero在屈性为ngVicw的div元素中,将欧入其他IITML的模板。紧接着下方,我摆放了三个按钮,其中前两个是上一页和下一页的翻页按钮;一个输入框可供用户输入他想跳转到的页码,旁边的按钮作为页码的提交按钮,点击后页面立即翻页。这三个按钮里面都有一个ngClick属性,表示当用户点击按钮后,便会执行对应的函数。在讲解angularJS的js代码前,先截图看看文件的目录结构

6、。▼口location▼口data&students.json▼tJlib區angularjsangular-route.minjs▼亡]view血student.html岡index.html

7、S

8、turnPage.html上面的index,html是之前两个例子的,可以不去理会。为了简单期间,我把script脚本都放在了turnPage.html文件的下方了。下面就是全这个文件的完整代码:turnPage.html

9、arset二"UTF-8">•turnPageButtonArea{background-color:#f07al3;width:500px;height:30px;1ine-height:30px;text-align:center;margin:lOpxauto;padding:20px;}butt

10、on{margin-right:20px;width:lOOpx;height:30px;font-size:15px;•pageNum{width:

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。