Angular中如何将$http请求结果追加到$scope.data而非覆盖？

AI 小北

2026-5-27

解决方案：将$http返回结果追加到$scope.data而非覆盖

嘿，这个需求很好实现，核心就是把$scope.data初始化为数组，然后在请求成功后用数组方法追加新数据，而不是直接覆盖。我给你一步步梳理修改方案：

关键修改点

初始化数组：首先要把$scope.data初始化为空数组，不然第一次追加时会因为它是undefined报错。
追加数据：在$http的成功回调里，不要直接赋值$scope.data = response.data，而是用数组的push方法（如果返回单个对象）或者扩展运算符批量追加（如果返回数组）。
修复错误回调的小bug：原来的错误提示里用了未定义的e，应该改成errResponse。

修改后的完整代码

app.controller("processModel", function ($scope, $http, $interval) { 
  // 1. 初始化为空数组，确保后续能调用数组方法
  $scope.data = [];
  
  $scope.LoadData = function() { 
    $http({ 
      method: "GET", 
      url: 'Home/DataRefresh', 
      params:{'_': +new Date() } // 加时间戳避免缓存，这个处理很实用！
    }).then(function success(response) { 
      // 2. 追加数据：兼容返回单个对象或数组的情况
      if (Array.isArray(response.data)) {
        $scope.data.push(...response.data);
      } else {
        $scope.data.push(response.data);
      }
    }, function error(errResponse) { 
      // 3. 修复变量名错误，完善错误提示
      alert("data " + errResponse.data + " status " + errResponse.status + " headers " + errResponse.headers());
    });
  }

  // 别忘了启动$interval自动刷新，示例为每5秒调用一次
  $interval($scope.LoadData, 5000);
});