Angularjs下一个和上一个按钮？答案

【问题标题】：Angularjs next and previous button?Angularjs下一个和上一个按钮？
【发布时间】：2017-01-11 22:09:51
【问题描述】：

我正在尝试以角度创建下一个和上一个按钮。我是编程新手。我写了一个程序。如果我使用自定义数组 $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

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

在控制器工厂函数中注入和使用它们时，您搞砸了依赖顺序。确保注入的依赖项的使用顺序与注入的顺序相同。

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

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

【讨论】：

我是编程新手，所以我可以理解。
@joydee 确实可以通过点击投票数正下方来接受答案，谢谢

【解决方案2】：

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

【讨论】：

【解决方案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;
});

【讨论】：