优质文章外链发布 5元/条 QQ:2970302840
Camila Waz 发布于
2018-08-16 13:01:56

AngularJS limitTo json数据分页效果

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>
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2018-08-15/103.html
最后生成于 2019-10-06 16:28:50