项目中用到angularjs的表格ng-table,功能相当强大,像搜索、排序、checkbox、分页、每页表格显示数目等都有。API,demo什么的也只能参考官网了。这里做个备忘,哪天肯定还会用到。
HTML:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="angular.js"></script>
<script data-require="ng-table@*" data-semver="0.3.0" src="ngTable.js"></script> <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.2/ng-table.css" />
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<p><strong>Page:</strong> {{tableParams.page()}}
<p><strong>Count per page:</strong> {{tableParams.count()}}
<p>Filter: <input class="form-control" type="text" ng-model="filter.$" /></p>
<table ng-table="tableParams" show-filter="true" class="table">
<tr ng-repeat="user in $data" ng-class="{ 'emphasis': user.money > 500 }">
<td width="30" style="text-align: left" header="'ng-table/headers/checkbox.html'">
<input type="checkbox" ng-model="checkboxes.items[user.organizationId]" />
</td>
<td data-title="'编号'" sortable="'organizationId'">
{{user.organizationId}}
</td>
<td data-title="'名称'" sortable="'name'">
{{user.name}}
</td>
</tr>
</table>
<script type="text/ng-template" id="ng-table/headers/checkbox.html">
<input type="checkbox" ng-model="checkboxes.checked" id="select_all" name="filter-checkbox" value="" />
</script>
</body>
</html>
js:
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, ngTableParams, NameService) { var data = NameService.data;
$scope.tableParams = new ngTableParams(
{
page: 1, // show first page
count: 10, // count per page
sorting: {name:'asc'}
},
{
total: 0, // length of data
getData: function($defer, params) {
NameService.getData($defer,params,$scope.filter);
}
});
$scope.$watch("filter.$", function () {
$scope.tableParams.reload();
});
});
app.service("NameService", function($http, $filter){
function filterData(data, filter){
return $filter('filter')(data, filter);









