javascript - 将 AJAX 调用获取的数据附加到现有列表以进行延迟加载

Question

我对 UI 开发还很陌生，所以请耐心等待。我正在尝试在网页上实现延迟加载。也就是说，当用户滚动到页面底部时，将使用 AJAX 调用从服务器获取页面。想要做的是将新数据附加到已经存在的数据中。目前，新数据占据了整个 ListView ，并且滚动条移至顶部。这是我的代码:

AJAX 调用:

$scope.getMoreData=function(){
      updateAjaxData();
      var url=$scope.getURL();
      A.ajax(url, {
          method: 'post',
          params: AJAX_DATA,
          success: function(data, s, x) {
              $scope.providersList = JSON.parse(data.serviceproviderlist);
              $scope.serviceName = data.category;
              $scope.limit = SEARCH_LIMIT;
              $scope.$apply();
              var div = document.getElementById("spn-service-provider-list");
              var content = document.createTextNode($scope.providersList);
              div.appendChild(content);
          },
          error: function(xhr, statusText, errorThrown) {
              $scope.errorCallback(xhr);
          }
     });
  }

这是我的 HTML:

<div id="spn-service-provider-list">
    <div class="spnsearch">
        <i class="spnicon spn-icon-search"></i> 
                <input type="search" ng-model="spsearch" id="spsearch" placeholder="Search Providers" name="spsearch">
    </div>
    <div id="spn-list" style="height:100vh;overflow-y:scroll;" when-scrolled="showMoreItems(filteredproducts.length,limit)">
            <div ng-repeat="providersList in ( filteredproducts = ( providersList | filter:{ providerName: spsearch } | filter:{ citiesServicing: locationsearch }:ignoreNullComparator ))  | orderBy: 'rank' | limitTo: limit " >
            ...................
            ...................

问题在于，当使用 AJAX 调用获取新页面时，它会占用整个 ListView 。也就是说，旧列表完全消失，新列表占据其位置，滚动条移至顶部。 此外，成功附加到我的列表的是几个 [object]

这是建议的代码，仍然没有改变:

success: function(data, s, x) {
              if($scope.providersList === null) {
                $scope.providersList = []; /* init if null */
              }
              /* Update the existing array */
              Array.prototype.push.apply($scope.providersList, JSON.parse(data.serviceproviderlist));
              $scope.serviceName = data.category;
              $scope.limit = SEARCH_LIMIT;
              $scope.$apply();
              viewToBeDisplayed(LIST_VIEW);
          },

Answer 1

因为你删除了现有的数组。
所以替换

$scope.providersList = JSON.parse(data.serviceproviderlist);

与

if($scope.providersList == null) {
  $scope.providersList = []; /* init if null */
}
/* Update the existing array */
Array.prototype.push.apply($scope.providersList, JSON.parse(data.serviceproviderlist));