Angularjs次と前のボタン？

Question

私は、前後にボタンを作成しようとしています。私はプログラミングでは新しいです。私はプログラムを書いた。私がカスタム配列$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.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> 

あなたはDEPEで台無した出力

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

Answer 1

コントローラのファクトリ機能でそれらを使用して&を注入している。注入された依存関係は、注入されたのと同じ順序で使用する必要があります。

あなたは$filterが$http & $httpのインスタンスが$filterのインスタンスを持っていたfunction($scope, $filter, $http) {などの内部コントローラの工場の機能を使用して'$scope', '$http', '$filter' &を注入しました。

app.controller('MyCtrl', ['$scope', '$filter','$http', function ($scope, $filter, $http) { 

Answer 2

$ http要求がオブジェクトではなく配列を返すことに注意してください。オブジェクト上でスプライスを使用することはできません（フィルタでの操作と同じように）ので、これが機能しない別の原因になる可能性があります。このコードで

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

、それが動作するはずです：

Answer 3

は、このコードを置き換えます。基本的に、あなたの$ http要求は配列ではなくオブジェクトを返すため、オブジェクトに対してsplice操作を実行することはできません。さらに、応答形式は、$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; 
});