Angularjs 角度：尝试使用分页时未定义数据读取

我正在尝试对一个可能非常长的div列表进行分页。如果没有分页，我的工作会很好，但是当我尝试实现分页（将其用作一种模板：）时，我收到一个错误：

TypeError:无法读取未定义的

的属性“slice”。据我所知，这是一个涉及

$scope.data

变量的问题，因为我正在调用

$scope.data

上的slice。我不知道如何解决这个问题，让它工作。我将发布没有分页的工作版本，然后是带有分页的错误版本。控制器中唯一的区别是从线路

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>

---

在

$scope.data.slice（开始、结束）之前确保
$scope.data
不为空且为数组。一旦加载正确的页面，您就会得到这个消息吗？我已经添加了
$scope.data=[]
到fetchAllSamples（）方法的开头，但当我知道$scope.data中有数据时，这将导致没有错误，但一个没有div的空表。能否验证
$scope.data=response.data实际上包含
中的数据，然后
？另外，为什么要对
响应.data
执行
foreach
以仅递增
$scope.sampleCount
？您可以将
$scope.sampleCount
设置为等于
响应.data的长度，如果它确实有数据。是的，我可以验证scope.data确实包含数据，您是对的，这是一种不必要的获取数据的方法sampleCount@Ronnie我注意到$scope.data已填充，但$scope.filteredTodos从未填充。不知道为什么会这样，因为$scope.data是一个很长的列表
<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);
  });
}]);