AngularJS limitTo json数据分页效果
html代码：
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<div ng-repeat="v in list | pageStartFrom: curPage * pageSize | limitTo: pageSize">
<span>{{v.id}}、</span>
<span>{{v.name}}</span>
</div>
<button ng-click="curPage = 0" ng-disabled="curPage == 0">首页</button>
<button ng-click="curPage = curPage - 1" ng-disabled="curPage <= 0">上一页</button>
当前第{{curPage + 1}}页
<button ng-click="curPage = curPage + 1" ng-disabled="curPage >= pageCount">下一页</button>
<button ng-click="curPage = pageCount" ng-disabled="curPage == pageCount">尾页</button>
</div>
</body>
JavaScript代码：
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl',['$scope', function($scope) {
var data=[
{
"id":"1",
"name":"php",
},
{
"id":"2",
"name":"JavaScript",
},
{
"id":"3",
"name":"java",
},
{
"id":"4",
"name":"vue",
},
{
"id":"5",
"name":"angular",
},
]
$scope.list = data;
$scope.pageSize = 2;
$scope.curPage = 0;
$scope.pageCount = Math.ceil($scope.list.length / $scope.pageSize) - 1
}]);
myApp.filter('pageStartFrom', [function() {
return function(input, start) {
start = +start;
return input.slice(start);
}
}]);
</script>
0
1230博客
热门推荐：