AngularJS结合PHP：提交表单后如何清空输入字段及Bootstrap模态框表单数据

我懂你遇到的这个麻烦——每次点开添加记录的模态框，上次输入的内容还赖在表单里，确实挺影响操作体验的。核心原因是你绑定到表单的$scope.form对象在提交后没被重置，AngularJS的双向数据绑定会一直保留着之前的数值。

下面给你两种实用的解决思路，你可以根据自己的业务场景选：

方法一：提交成功后直接重置表单对象 #

在你的saveAdd函数的成功回调里，等确认数据插入成功后，直接把$scope.form重置为空对象，这样绑定的表单字段就会自动清空了。修改后的代码如下：

$scope.saveAdd = function () {
  $http({
    method: 'post',
    url: 'user/insert',
    data: $scope.form,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  }).success(function (data) {
    if (data == 1) {
      $scope.user_succ = !$scope.user_succ;
      $scope.succ = "User added successfully";
      $timeout(function () {
        $(".modal").modal("hide");
        // 关键：重置表单对象
        $scope.form = {};
      }, 3000);
    } else {
      // 处理添加失败的情况，比如提示错误信息
      $scope.err = "Failed to add user";
    }
  }).error(function() {
    // 处理HTTP请求失败的场景
    $scope.err = "Server error occurred";
  });
};

方法二：监听模态框关闭事件，自动清空表单 #

有时候用户可能打开模态框后没提交就关掉了，这时候下次打开也得清空表单。你可以监听Bootstrap模态框的hidden.bs.modal事件，在模态框关闭时触发表单重置：

// 在控制器初始化阶段添加监听
angular.element(document).ready(function() {
  // 记得把#yourModalId换成你实际的模态框ID
  $('#yourModalId').on('hidden.bs.modal', function () {
    $scope.$apply(function() {
      $scope.form = {}; // 重置表单数据
    });
  });
});

这里用$scope.$apply()是为了触发AngularJS的脏检查，确保视图能及时同步更新。

额外小提示：如果表单有默认值 #

如果你的表单字段有默认值（比如性别默认选"男"），别直接设为空对象，而是初始化一个带默认值的对象，比如：

$scope.form = {
  username: '',
  email: '',
  gender: 'male' // 保留默认值
};

这样重置后表单会回到预设的默认状态，用户体验会更顺畅。

另外要注意，PHP端的user/insert接口要正确接收POST过来的表单数据，处理完成后返回准确的状态标识（比如成功返回1，失败返回0），确保前端能正确判断操作结果。

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