Angular：尝试使用分页时未定义数据读取

Question

我正在尝试对可能很长的div列表进行分页。我在没有分页的情况下工作正常但是当我尝试实现分页时（使用此作为一种模板：http://plnkr.co/edit/81fPZxpnOQnIHQgp957q?p=preview）我收到错误：TypeError: cannot read property 'slice' of undefined。据我所知，这是一个涉及$scope.data变量的问题，因为我在$scope.data上调用了切片。我不知道如何解决这个问题并让它发挥作用。我将发布没有分页的工作版本，然后是带有分页的错误版本。控制器的唯一区别是从filteredTodos行开始。在调用任何其他工作之前，我正在调用fetchAllSamples()填充$scope.data所以我不确定为什么它会被定义。非常感谢所有帮助。

错误的分页html：

<div>
  <div>
    <div class="col-md-12">
      <div style="border: 1px solid #000000">
        <div ng-repeat="item in filteredTodos" style="margin-left: 14px">
          <a href="underConstruction.html" style="font-size: 34px; text-decoration: underline">{{item.name}}</a>
          <br> <span style="font-size: 20px">{{item.description}}</span>
          <br>
          <hr>
        </div>
      </div>
    </div>
    <pagination ng-model="currentPage" total-items="data.length" max-size="maxSize" boundary-links="true"> </pagination>
  </div>
</div>

并更正非分页：

<div>
  <div>
    <div class="col-md-12">
      <div style="border: 1px solid #000000">
        <div ng-repeat="item in data" style="margin-left: 14px">
          <a href="underConstruction.html" style="font-size: 34px; text-decoration: underline">{{item.name}}</a>
          <br> <span style="font-size: 20px">{{item.description}}</span>
          <br>
          <hr>
        </div>
      </div>
    </div>
  </div>
</div>

使用以下控制器：

app.controller('SamplesQueryController','$scope','$http', function($scope, $http) {
  $scope.newSampleName = {
    sampleName: ''
  };

  $scope.attributes = [{
    name: '',
    value: ''
  }];

  $scope.sampleCount = 0;

  $scope.addAttribute = function() {
    var attribute = {
      name: '',
      value: ''
    };
    $scope.attributes.push(attribute);
  }

  $scope.showModal = false;
  $scope.toggleModal = function() {
    $scope.showModal = !$scope.showModal;
  };

  $scope.headerCount = 0;
  $scope.headers = new Array("Id", "Name", "URL", "Description");

  $scope.fetchAllSamples = function() {
    $scope.response = null;
    $scope.method = 'GET';
    $scope.url = '/api/samples';

    $http({
      method: $scope.method,
      url: $scope.url
    }).then(function(response) {
        $scope.data = response.data;
        angular.forEach(response.data,function(value,key) {
          $scope.sampleCount += 1;
        });
      },
      function(response) {
        $scope.data = response.data || "Request failed";
      }
    );
  };

  $scope.createSample = function() {
    $scope.response = null;
    $scope.method = 'POST';
    $scope.url = '/api/samples';
    $http({
      method: $scope.method,
      url: $scope.url,
      data: JSON.stringify({
        name: $scope.newSampleName.sampleName,
        attributes: $scope.attributes
      })
    }).then(function(response) {
      $scope.fetchAllSamples();
    });
  };
  $scope.fetchAllSamples();
  $scope.filteredTodos = [], $scope.currentPage = 1, $scope.numPerPage = 10, $scope.maxSize = 5;
  $scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage),
      end = begin + $scope.numPerPage;
    $scope.filteredTodos = $scope.data.slice(begin, end);
  });
}]);