ngtable 是angular的一个表格控件,集成了表格、分页、排序等等功能。官方学习网站http://ng-table.com/#/ 纯英文,但还是比较好用的。
需要的文件
ng-table.min.css、ng-table.min.js、angular.js
具体操作(不分前后):
1、注入
angular.module("myApp", ["ngTable"]);
2、controller
app.controller('DemoCtrl', function($scope, NgTableParams) {
var self = this;
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43}];
self.tableParams = new NgTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
counts:[10,15],
getData: function(params) {
return data
//获取数据的方法,之后再说
}
});
})
3、HTML
<div ng-controller="DemoCtrl as demo">
<table ng-table="demo.tableParams" class="table">
<tr ng-repeat="user in $data">
<td title="'姓名'">{{user.name}}</td>
<td title="'年龄'">{{user.age}}</td>
</tr>
</table>
</div>
这里title=”’姓名’” 是双括号中包单括号