angularjs表格ng-table使用备忘录

项目中用到angularjs的表格ng-table，功能相当强大，像搜索、排序、checkBox、分页、每页表格显示数目等都有。API，demo什么的也只能参考官网了。这里做个备忘，哪天肯定还会用到。

HTML：

rush:xhtml;"> <Meta charset="utf-8"/>

js：

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);
}

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,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,params)

 $defer.resolve(transformedData);
}); 

}

}
};
return service;
});

json数据：

rush:js;"> [{ "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" }]

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

原文地址：https://www.jb51.cc/js/49743.html