关于angularjs读取json文件数据并分页显示html 15
图为json文件一部分数据,现在我要把json数据全部读出,然后在html文件中以table表格形式显示,并且每五行数据分一页,请问代码应该怎么写?由于之前没接触过ang...
图为json文件一部分数据,现在我要把json数据全部读出,然后在html文件中以table表格形式显示,并且每五行数据分一页,请问代码应该怎么写?由于之前没接触过angularjs,现在领导又要我一天之内完成这个功能,来不及系统的学,所以希望懂得大神能给个代码,或者类似的模版代码能让我参考参考也好,谢谢了~
展开
1个回答
展开全部
// 第一步,获取JSON数据
$http.get("xxx.json").success(function(data){
$scope.currentData = data;//定义变量存储获取到的JSON数据;
});
$scope.tableData = []; // 定义表格展示用到的数据;
$scope.currentPage = 1;//定义初始页码;
$scope.pageSize = 5; // 定义每页的数据条数;
// HTML写个表格,这个不难,自己写;
ng-repeat = "tableData" // 表格数据ng-repeat 循环赋值
// 翻页功能
$scope.changePage = function(type,$scope.currentPage){
// 清空展示的数据
$scope.tableData = [];
// 上一页
if(type === 'prev'){
Math.min(1,$scope.currentPage--);// 页码递减
$scope.currentData.each(function(index,item){
// 循环读取表格数据,用来赋值给表格展示的数组
// 如果当前的下标是当前页的范围,那么丢给表格展示数据用到的变量数组
if($scope.currentPage * $scope.pageSize > index && index >= ($scope.currentPage - 1)*$scope.pageSize){
$scope.tableData.push(item);
}
});
}
else{
// 自己写,同样的逻辑
}
}
// 进入界面,调用一遍翻页功能,不然没数据。
/**
* 有的地方自己适当改一下,没写的那么标准
*/
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询