AngularJS新增数据后列表不显示，需刷新页面才加载的问题

这个问题在AngularJS开发里太常见啦——本质就是你提交新数据后，没有主动更新绑定到页面的数据源，导致双向绑定没触发页面刷新。结合你的代码，我给你两个最常用的解决方案：

方案1：提交成功后重新拉取完整列表 #

首先把获取数据的逻辑封装成可复用的函数，这样提交完成后直接调用它就能更新页面：

// 封装获取仓库数据的函数
$scope.getWarehouses = function() {
  $http({ 
    url:'warehouse/warehouse_fetchdata', 
    method: "POST" 
  }).then(function (response) { 
    // AngularJS 1.6+建议用then替代success
    $scope.mywarehousess = response.data; 
  }).catch(function(err) {
    console.error('获取仓库数据失败:', err);
  });
};

// 页面初始化时先加载一次数据
$scope.getWarehouses();

// 表单提交的函数（你需要把这个和提交按钮绑定）
$scope.submitNewWarehouse = function(newWarehouse) {
  $http({
    url:'warehouse/warehouse_insert', // 替换成你的插入接口地址
    method: "POST",
    data: newWarehouse
  }).then(function(response) {
    // 提交成功后，重新拉取数据更新列表
    $scope.getWarehouses();
    // 顺便重置表单，提升用户体验
    $scope.warehouseForm.$setPristine();
    $scope.newWarehouse = {};
  }).catch(function(err) {
    console.error('提交仓库数据失败:', err);
  });
};

方案2：直接把新记录添加到现有数组（更高效） #

如果你的插入接口会返回刚创建的那条完整记录，那完全不用重新请求整个列表，直接把新记录push到$scope.mywarehousess里就行：

$scope.submitNewWarehouse = function(newWarehouse) {
  $http({
    url:'warehouse/warehouse_insert',
    method: "POST",
    data: newWarehouse
  }).then(function(response) {
    // 假设接口返回的response.data就是刚插入的仓库对象
    $scope.mywarehousess.push(response.data);
    // 重置表单
    $scope.warehouseForm.$setPristine();
    $scope.newWarehouse = {};
  }).catch(function(err) {
    console.error('提交失败:', err);
  });
};

额外注意事项 #

• 检查你的HTML列表是否正确用ng-repeat绑定了数组：

  <tbody>
    <tr ng-repeat="warehouse in mywarehousess track by warehouse.id">
      <!-- 这里假设每条数据有唯一的id字段，用track by避免重复渲染问题 -->
      <td>{{$index + 1}}</td>
      <td>{{warehouse.name}}</td>
      <td>{{warehouse.address}}</td>
      <td>
        <!-- 管理操作按钮 -->
      </td>
    </tr>
  </tbody>
  

• 如果你还在使用success/error方法，建议换成then/catch——AngularJS 1.6及以上版本已经弃用了前者。

内容的提问来源于stack exchange，提问作者user9728606