Question

我遇到了一个用AngularJs编写的程序显示的非常奇怪的行为。我在AngularJs中实现无限滚动。下面的函数在成功的AJAX调用时被调用，该调用发生在：

用户滚动到屏幕的末尾。
选择一些过滤器，点击＆＃34;搜索＆＃34;按钮。

在第一种情况下，从AJAX调用获取的数据将附加到现有列表中。在第二种情况下，我打算完全清空列表中的任何现有数据，并显示新数据。这是我的代码：

$scope.successCallBack=function(data){
    $('#spn-model-buffering-image').hide();   //hide the loading spinner icon
    if($scope.providersList === null) {
       $scope.providersList = []; /* init if null */
    }
    if($scope.scrolled === 'true'){
    /*If it was an scroll-end event, then simply append the new data to the existing one*/
    Array.prototype.push.apply($scope.providersList, JSON.parse(data.serviceproviderlist));   //push the new data to the existing list
    }
    else{
    /*If the user clicks on "Search Providers" button, then new data are fetched, and occupy the entire list view*/
    $scope.providersList=[];
    $scope.providersList=JSON.parse(data.serviceproviderlist);
    }

   $scope.serviceName = data.category;
   $scope.$apply();
   viewToBeDisplayed(LIST_VIEW);
   $scope.scrolled='true';
}

因此，在成功调用AJAX之后，将调用上述方法。它隐藏缓冲图像，并检查名为滚动的变量是否设置为true。如果是，则表示该事件不是按钮单击，但是用户已到达屏幕的末尾，因此必须附加数据。此外，用户点击了按钮，因此必须重新显示数据。

这是在按钮单击事件上调用的函数：

$scope.getFilteredData=function(){
     $scope.scrolled='false';
     $scope.getMoreData();
}

我的问题：数据会一直追加到现有列表，除非我快速连续多次点击按钮。然后，新数据占据完整的列表视图。

有人可以告诉我我可能做错了吗？谢谢！

这是AJAX呼叫代码：

$scope.getMoreData=function(){
      $('#spn-model-buffering-image1').show();   //while the data are being fetched, display the loading spinner
      $scope.updateAjaxData();   //update AJAX data: pagekey, category, and reftag
      var url=$scope.getURL();
      A.ajax(url, {
          method: 'post',
          params: AJAX_DATA,
          success: function(data, s, x) {
              $scope.successCallBack(data);
          },
          error: function(xhr, statusText, errorThrown) {
              $scope.errorCallback(xhr);
          }
     });
  }

AngularJs中按钮单击事件的奇怪行为

0 个答案: