Angularjs nächste und vorherige Schaltfläche?

Question

Ich versuche, nächste und vorherige Schaltfläche in eckigen zu erstellen. Ich bin neu in der Programmierung. Ich habe ein Programm geschrieben. Wenn ich benutzerdefinierte Array $scope.data = [] verwenden, funktioniert es. Wenn ich $http benutze es funktioniert nicht bitte helfen, dies zu lösen.

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

<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> 

Ausgabe

Previous {{currentPage+1}}/{{numberOfPages()}} Next 

Answer 1

Sie hatte in depe verkorkste Ndency Reihenfolge beim Injizieren & mit ihnen in der Controller Factory-Funktion. Stellen Sie sicher, dass die injizierte Abhängigkeit in derselben Reihenfolge verwendet werden soll, in der sie injiziert wird.

Sie wurden Injektion '$scope', '$http', '$filter' & innerhalb Controller Factory Funktion wie function($scope, $filter, $http) { mit dem $filter Instanz hatte von $http & $http Instanz $filter hat.

Answer 2

Beachten Sie, dass Ihre $ http-Anfrage ein Objekt und kein Array zurückgibt. Sie können keine Spleißung für Objekte verwenden (wie Sie es im Filter tun). Dies könnte ein weiterer Grund sein, warum dies nicht funktioniert.

Answer 3

diesen Code ersetzen:

 $http.get('https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json') 
     .then(function(response){ 
     $scope.data = response.data; 
     }); 

mit diesem Code, und es sollte funktionieren. Im Grunde genommen war Ihre $ http Anfrage ein Objekt und kein Array und Sie können splice Operation auf Objekt nicht ausführen. Plus, das Antwortformat war anders als das, was Sie in $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; 
});