发表于： 2017-05-06 18:39:03
1 1000
今日7,8各做了一部分功能
收获两点：
1）利用AngularJS准备测试数据，测试前端功能，不必与后台交互
2）学会使用ng-Table的pagination功能
1.官网链接 https://github.com/esvit/ng-table#4.0.0
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; } }; });
返回列表
评论