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>

输出

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

Answer 1

在注入和放弃时，你已经搞砸了依赖序列了在控制器工厂功能中使用它们。确保注入的依赖项的使用顺序与注入顺序相同。

您正在注射'$scope', '$http', '$filter'＆amp;使用内部控制器工厂函数，例如function($scope, $filter, $http) {，其中$filter的实例为$http＆amp; $http的实例为$filter。

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

Answer 2

请注意，$ http请求返回的是对象，而不是数组。你不能在对象上使用拼接（就像你在过滤器中那样），这可能是导致它不起作用的另一个原因。

Answer 3

替换此代码：

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

使用此代码，它应该工作。基本上，你的$ 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;
});

Angularjs下一个和上一个按钮？

3 个答案: