Angularjs pagination only display 1 -
i cant paginate data return $http display 1 page. follow plunker still dont know problem why dont paginate.
this script
$scope.currentpage = 1; $scope.numperpage = 2; $scope.maxsize = 5; $scope.maketodos = function() { $scope.todos = response.data; //return of $http } $scope.maketodos(); $scope.$watch('currentpage + numperpage', function() { var begin = (($scope.currentpage - 1) * $scope.numperpage); var end = begin + $scope.numperpage; $scope.names = $scope.todos.slice(begin, end); console.log($scope.todos.slice(begin, end)); });
this inside of response.data
{"id":"1","name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"}, {"id":"2","name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"}, {"id":"3","name":"name 3","description":"description 1","field3":"field3 3","field4":"field4 3","field5 ":"field5 3"}, {"id":"4","name":"name 4","description":"description 1","field3":"field3 4","field4":"field4 4","field5 ":"field5 4"}, {"id":"5","name":"name 5","description":"description 1","field3":"field3 5","field4":"field4 5","field5 ":"field5 5"}, {"id":"6","name":"name 6","description":"description 1","field3":"field3 6","field4":"field4 6","field5 ":"field5 6"}, {"id":"7","name":"name 7","description":"description 1","field3":"field3 7","field4":"field4 7","field5 ":"field5 7"}, {"id":"8","name":"name 8","description":"description 1","field3":"field3 8","field4":"field4 8","field5 ":"field5 8"}, {"id":"9","name":"name 9","description":"description 1","field3":"field3 9","field4":"field4 9","field5 ":"field5 9"}, {"id":"10","name":"name 10","description":"description 1","field3":"field3 10","field4":"field4 10","field5 ":"field5 10"}
edited
this html
<body ng-controller="todocontroller"> <h1>todos</h1> <h4>{{todos.length}} total</h4> <ul ng-repeat="x in names"> <li>{{x.id}}</li> <li>{{x.name}}</li> <li>{{x.description}}</li> <li>{{x.field3}}</li> <li>{{x.field4}}</li> <li>{{x.field5}}</li> </ul> <pagination ng-model="currentpage" total-items="names.length" max-size="maxsize" boundary-links="true"> </pagination> </body>
in pagination component add items-per-page='numperpage'
attribute paging work accordingly
your final code like
<pagination ng-model="currentpage" total-items="names.length" items-per-page='numperpage' max-size="maxsize" boundary-links="true"> </pagination>
here updated example plunker
Comments
Post a Comment