angularjs表格ng-table使用备忘录

项目中用到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 pagecount: 10,// count per pagesorting: {name:"asc"} }, {total: 0, // length of datagetData: 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）; }function orderData（data, params）{return params.sorting（） ? $filter（"orderBy"）（data, params.orderBy（）） : filteredData; }function sliceData（data, params）{return data.slice（（params.page（） - 1） * params.count（）, params.page（） * params.count（）） }function transformData（data,filter,params）{return sliceData（ orderData（ filterData（data,filter）, params ）, params）; }var service = {cachedData:[],getData:function（$defer, params, filter）{ if（service.cachedData.length>0）{console.log（"using cached data"）var filteredData = filterData（service.cachedData,filter）;var transformedData = sliceData（orderData（filteredData,params）,params）;params.total（filteredData.length）$defer.resolve（transformedData）; } else{console.log（"fetching data"）$http.get（"data.json"）.success（function（resp）{ angular.copy（resp,service.cachedData） params.total（resp.length） var filteredData = $filter（"filter"）（resp, filter）; var transformedData = transformData（resp,filter,params）$defer.resolve（transformedData）;}）;} } }; return service; }）;

json数据：

[{"hidden": 1,"launchImage": "2015_4_9_12_bb7e0a446ed74ae7ad0a3554a54183bc_1298477763","name": "张三","orgId": 1498031949070997504,"organizationId": "1498031949070997504"}, {"hidden": 1,"launchImage": "http://7s1rmc.com1.z0.glb.clouddn.com/2015_4_9_12_0ab5b02cf1df4ac49a7376b820816307_2127491219|39e202124ac90ec531009b0edbbbe0ba","name": "李四","orgId": 1498046360909250560,"organizationId": "1498046360909250560"}]

以上就是本文的全部内容，希望对大家的学习有所帮助。