我正在尝试以 Angular 创建下一个和上一个按钮。我是编程新手。我写了一个程序。如果我使用自定义数组 $scope.data = [] 它会起作用。当我使用 $http 时它不工作请帮助解决这个问题。
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);
}
/*$scope.data = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];*/
$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.html
<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>
输出
Previous {{currentPage+1}}/{{numberOfPages()}} Next
最佳答案
在 Controller 工厂函数中注入(inject)和使用它们时，您弄乱了依赖序列。确保注入(inject)的依赖项的使用顺序与注入(inject)的顺序相同。
您正在注入(inject) '$scope', '$http', '$filter' 并使用内部 Controller 工厂函数，例如 function($scope, $filter, $http) { 其中 $filter 有 $http 的实例 & $http 有 $filter 的实例。
app.controller('MyCtrl', ['$scope', '$filter','$http', function ($scope, $filter, $http) {
关于javascript - Angularjs 下一个和上一个按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39315330/