I need assistance with creating next and previous buttons in Angular. As I am new to programming, I have written a program that works when using a custom array $scope.data = []. However, it doesn't work when I use $http and I would appreciate any help in solving this issue.
Controller.js
var app=angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', '$http', '$filter', function ($scope, $filter, $http) {
$scope.currentPage = 0;
$scope.pageSize = 2;
$scope.numberOfPages=function(){
return Math.ceil($scope.pageSize);
}
$http.get('https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json')
.then(function(response){
$scope.data = response.data;
});
}]);
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
index.htlm
<div ng-app="myApp" ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
{{item.title}}
</li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
</button>
</div>
Output
Previous {{currentPage+1}}/{{numberOfPages()}} Next