angularjs表格ng-table使用备忘录

前端之家收集整理的这篇文章主要介绍了angularjs表格ng-table使用备忘录前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

HTML:

<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数据:

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

原文链接:https://www.f2er.com/js/49743.html

猜你在找的JavaScript相关文章