AngularJS学习之 ngTable 翻页 功能以及利用angular service准备测试数据
2017-05-06 18:31
405 查看
1.官网链接 https://github.com/esvit/ng-table#4.0.0
2.安装ngTable后,一定要记得先注册到自己的项目
3.编辑使用ngTable的controller JS文件
4.html部分的书写
*************************
利用 yo angular:service Article-Service创建一个服务,生成的js文件里面可以创建一个构造函数,属性是JSON数据,方法就用来返回这些数据,然后我们就可以利用这个服务提供的数据进行前端功能的测试啦(在需要用到他的controller里面注人这个service,比如
)
2.安装ngTable后,一定要记得先注册到自己的项目
.module('pttengApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch', 'mgcrea.ngStrap', 'ngTable' ])
3.编辑使用ngTable的controller JS文件
angular.module('pttengApp') .controller('ArticlelistCtrl', function ($scope,$location,ArticleService,NgTableParams) {/*NgTableParams一定要放在正确的位置*/ var self=this; var simplelist=ArticleService.getAll(); /*这个就是传给NgTableParams的数据,也就是我们table里要显示的各行数据*/ self.tableParams=new NgTableParams({ count: 5},{counts: [5, 10, 20],dataset:simplelist}); self.selectedPageSizes=self.tableParams.settings().counts; self.availablePageSizes = [5, 10, 15, 20, 25, 30, 40, 50, 100]; self.changePage = changePage; function changePage(nextPage){ self.tableParams.page(nextPage); } function changePageSize(newSize){ self.tableParams.count(newSize); } function changePageSizes(newSizes){ // ensure that the current page size is one of the options if (newSizes.indexOf(self.tableParams.count()) === -1) { newSizes.push(self.tableParams.count()); newSizes.sort(); } self.tableParams.settings({ counts: newSizes}); } });
4.html部分的书写
<table ng-table="articlelist.tableParams" show-filter="true" class="table table-hover">/*黑色高亮的就是使用ngTable的controller name*/ <tr ng-repeat="article in $data">/*强调这个$data就是说这个很关键,这个data是tableParams里的data数组,也就是通过dataset添加进去要显示的各行数据*/ <td>{{article.id}}</td> <td>{{article.name}}</td> <td>{{article.type}}</td> <td>{{article.createtime}}</td> <td>{{article.lastmodifiedtime}}</td> </tr> </table>
*************************
利用 yo angular:service Article-Service创建一个服务,生成的js文件里面可以创建一个构造函数,属性是JSON数据,方法就用来返回这些数据,然后我们就可以利用这个服务提供的数据进行前端功能的测试啦(在需要用到他的controller里面注人这个service,比如
.controller('ArticlelistCtrl', function ($scope,$location,ArticleService,NgTableParams) {
)
'use strict'; /** * @ngdoc service * @name pttengApp.ArticleService * @description * # ArticleService * Service in the pttengApp. */ angular.module('pttengApp') .service('ArticleService', function () { // AngularJS will instantiate a singleton by calling "new" on this function var articles = [ { "id": "1", "name": "行业动态", "type": "行业", "createtime": "2017-05-06", "lastmodifiedtime": "2017-05-06", "createuser": "admin", "status": "0", "operation": "delete" }, { "id": "2", "name": "JSON", "type": "语法", "createtime": "2017-05-06", "lastmodifiedtime": "2017-05-06", "createuser": "admin", "status": "0", "operation": "delete" } ]; return { getAll: function () { return articles; }, getById: function () { for (var i = 0; i < articles.length; i++) { if (articles[i].id === id) { return articles[i]; } } return null; } }; });
相关文章推荐
- xml学习(三)---利用xml文件实现数据岛功能(网页显示xml文件中的内容免C#代码操作xml文件)
- Dll学习三_Dll 相互间以及主程序间的数据共享——测试未通过,应该用内存映射
- Android利用TrafficStats类实现监测手机网速功能,以及double数据小数点后保留2位
- Python---利用scipy.misc等库对jpg以及png等图像数据预处理(用于深度学习喂数据)
- 16 利用scipy.misc等库对jpg以及png等图像数据预处理(用于深度学习喂数据)
- VS 2010 测试功能学习(九) - 数据驱动的手工测试用例(@Parameter)
- 关于数据挖掘的学习计划以及相关的准备
- angularjs中的下拉框,以及数据的回显,并且还可以实现下拉框的功能
- angularjs分离controller的一些逻辑到factory,利用angularjs陈列数据以及增加数据为例。springMVC处理请求
- 【转载】利用scipy.misc等库对jpg以及png等图像数据预处理(用于深度学习喂数据)
- MVC3学习第十四章 佟掌柜第三弹——MVC3下利用陕北吴旗娃的验证码控件实现验证码功能以及在mvc3下使用编辑器
- jmeter学习笔记(3)——准备用户和密码的数据,做压力测试用 (jbdc)
- 利用spm提供的MoAEpilot听觉数据学习预处理以及单被试glm分析与统计推断
- 利用实现数据同步功能, 已经完成测试,可以实现.
- VS 2010 测试功能学习(九) - 数据驱动的手工测试用例(@Parameter)(转)
- Dll学习三_Dll 相互间以及主程序间的数据共享——测试未通过,应该用内存映射
- 【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回
- Android service学习总结和利用service实现的后台音乐播放功能
- whole-genome-sequencing Data Analysis 学习笔记3: 测试数据及参考基因组的准备
- 小白学习大数据之路——Hadoop3.0.0-alpha2 安装以及测试程序wordcount实践