angularjs表格ng-table使用备忘录
项目中用到angularjs的表格ng-table，功能相当强大，像搜索、排序、checkbox、分页、每页表格显示数目等都有。API，demo什么的也只能参考官网了。这里做个备忘，哪天肯定还会用到。
HTML：
<!DOCTYPEhtml>
<html>
<metacharset="utf-8"/>
<head>
<scriptdata-require="angular.js@*"data-semver="1.2.0-rc3-nonmin"src="angular.js"></script>
<scriptdata-require="ng-table@*"data-semver="0.3.0"src="ngTable.js"></script>
<linkdata-require="ng-table@*"data-semver="0.3.0"rel="stylesheet"href="http://bazalt-cms.com/assets/ng-table/0.3.2/ng-table.css"/>
<linkdata-require="bootstrap-css@*"data-semver="3.0.0"rel="stylesheet"href="bootstrap.min.css"/>
<linkrel="stylesheet"href="style.css"/>
<scriptsrc="script.js"></script>
</head>
<bodyng-app="main"ng-controller="DemoCtrl">
<p><strong>Page:</strong>{{tableParams.page()}}
<p><strong>Countperpage:</strong>{{tableParams.count()}}
<p>Filter:<inputclass="form-control"type="text"ng-model="filter.$"/></p>
<tableng-table="tableParams"show-filter="true"class="table">
<trng-repeat="userin$data"ng-class="{'emphasis':user.money>500}">
<tdwidth="30"style="text-align:left"header="'ng-table/headers/checkbox.html'">
<inputtype="checkbox"ng-model="checkboxes.items[user.organizationId]"/>
</td>
<tddata-title="'编号'"sortable="'organizationId'">
{{user.organizationId}}
</td>
<tddata-title="'名称'"sortable="'name'">
{{user.name}}
</td>
</tr>
</table>
<scripttype="text/ng-template"id="ng-table/headers/checkbox.html">
<inputtype="checkbox"ng-model="checkboxes.checked"id="select_all"name="filter-checkbox"value=""/>
</script>
</body>
</html>
js：
varapp=angular.module('main',['ngTable']).
controller('DemoCtrl',function($scope,ngTableParams,NameService){
vardata=NameService.data;
$scope.tableParams=newngTableParams(
{
page:1,//showfirstpage
count:10,//countperpage
sorting:{name:'asc'}
},
{
total:0,//lengthofdata
getData:function($defer,params){
NameService.getData($defer,params,$scope.filter);
}
});
$scope.$watch("filter.$",function(){
$scope.tableParams.reload();
});
});
app.service("NameService",function($http,$filter){
functionfilterData(data,filter){
return$filter('filter')(data,filter);
}
functionorderData(data,params){
returnparams.sorting()?$filter('orderBy')(data,params.orderBy()):filteredData;
}
functionsliceData(data,params){
returndata.slice((params.page()-1)*params.count(),params.page()*params.count())
}
functiontransformData(data,filter,params){
returnsliceData(orderData(filterData(data,filter),params),params);
}
varservice={
cachedData:[],
getData:function($defer,params,filter){
if(service.cachedData.length>0){
console.log("usingcacheddata")
varfilteredData=filterData(service.cachedData,filter);
vartransformedData=sliceData(orderData(filteredData,params),params);
params.total(filteredData.length)
$defer.resolve(transformedData);
}
else{
console.log("fetchingdata")
$http.get("data.json").success(function(resp)
{
angular.copy(resp,service.cachedData)
params.total(resp.length)
varfilteredData=$filter('filter')(resp,filter);
vartransformedData=transformData(resp,filter,params)
$defer.resolve(transformedData);
});
}
}
};
returnservice;
});
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"
}]
以上就是本文的全部内容，希望对大家的学习有所帮助。