Angular中点击按钮清空输入框的实现问题

我完全懂你遇到的困扰——数据已经成功发送并添加到列表里了，但输入框还留着之前的内容，想要点完按钮就直接清空它，还不用刷新页面对吧？这在AngularJS里其实很好解决，核心就是操作你绑定的ng-model变量就行。

方法一：直接重置绑定的模型属性 #

在你处理按钮点击的控制器方法里，等数据发送、添加到列表的逻辑完成后，直接把绑定的模型值设为空字符串就行。比如你的按钮点击方法可以写成这样：

$scope.submitName = function() {
  // 这里是你发送数据、添加到列表的业务逻辑
  // ...等数据处理完成后...
  $scope.ff.Name = ''; // 清空输入框绑定的模型变量
};

对应的按钮HTML要绑定这个方法：

<button class="btn btn-primary" ng-click="submitName()">提交</button>

因为AngularJS的ng-model是双向绑定的，模型变量清空了，输入框的内容会自动跟着清空，完全不需要刷新页面。

方法二：重置整个对象（适合多字段表单） #

如果ff是你在控制器里初始化的对象，比如：

$scope.ff = { Name: '' };

那在提交完成后也可以直接重置整个对象，一次性清空所有绑定的字段：

$scope.ff = { Name: '' };

这种方式适合表单有多个输入框的场景，一步到位清空所有内容。

注意事项 #

• 要是你用的是controllerAs语法（比如用vm.ff代替$scope.ff），那就要对应改成vm.ff.Name = ''，原理是一样的，都是操作绑定的模型变量。
• 确保控制器正确注入了$scope，或者作用域上下文是正确的，不然可能找不到绑定的变量。

给你个完整的小示例参考：
控制器代码：

angular.module('myApp', [])
.controller('MyController', function($scope) {
  $scope.ff = { Name: '' };
  $scope.nameList = [];

  $scope.submitName = function() {
    // 模拟发送数据并添加到列表的逻辑
    $scope.nameList.push($scope.ff.Name);
    // 清空输入框
    $scope.ff.Name = '';
  };
});

对应的HTML：

<div ng-app="myApp" ng-controller="MyController">
  <div class="input-group">
    <span class="input-group-addon" id="reg_input">Name</span>
    <input type="text" class="form-control" placeholder="Name" ng-model="ff.Name" required>
  </div>
  <button ng-click="submitName()">添加到列表</button>
  <ul>
    <li ng-repeat="name in nameList">{{name}}</li>
  </ul>
</div>

这样每次点击按钮，输入框就会自动清空，完全符合你的需求~

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