[英]Angularjs next and previous button?
I am trying to create next and previous button in angular. 我试图在角度创建下一个和上一个按钮。 I am new in programming.
我是编程新手。 I have written a program.
我写了一个程序。 If I use custom array
$scope.data = []
it works. 如果我使用自定义数组
$scope.data = []
它的工作原理。 When I use $http
it is not working please help to solve this. 当我使用
$http
它不起作用时,请帮助解决这个问题。
Controller.js 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.htlm 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
You had messed up in dependency sequence while injecting & using them in controller factory function. 在控制器工厂函数中注入和使用它们时,你已经搞砸了依赖序列。 Ensure that the injected dependency should be used in same order as they are injected.
确保注入的依赖项的使用顺序与注入顺序相同。
You were injecting '$scope', '$http', '$filter'
& using inside controller factory function like function($scope, $filter, $http) {
where $filter
had instance of $http
& $http
has instance of $filter
. 你正在注入
'$scope', '$http', '$filter'
并使用内部控制器工厂函数,如function($scope, $filter, $http) {
其中$filter
有$http
和$http
实例有实例$filter
。
app.controller('MyCtrl', ['$scope', '$filter','$http', function ($scope, $filter, $http) {
Note that your $http request is returning an object and not an array. 请注意,$ http请求返回的是对象而不是数组。 You cannot use splice on objects (Like you do in the filter) so that could be an additional cause why this is not working.
您不能在对象上使用拼接(就像在过滤器中一样),这可能是导致其无效的另一个原因。
Replace this code: 替换此代码:
$http.get('https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json')
.then(function(response){
$scope.data = response.data;
});
with this code, and it should work. 使用此代码,它应该工作。 Basically, your $http request was returning object, and not an array and you cannot perform
splice
operation on object. 基本上,你的$ http请求是返回对象,而不是数组,你不能对对象执行
splice
操作。 Plus, the response format was different from what you're using in $scope.data
: 另外,响应格式与您在
$scope.data
使用的格式不同:
$http.get('https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json')
.then(function(response)
{
var data = [];
response.data.forEach(function(movieObj, yearKey)
{
var temp = {};
temp.title = movieObj.title;
temp.id = movieObj.imdbId;
data.push(temp);
});
$scope.data = data;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.