当使用 AngularJS 超出限制时如何重置输入值？

在使用 AngularJS 进行表单输入时，有时会设置一些限制条件，比如最小长度、最大长度、只能输入数字等等。但是，当用户输入的内容超出了这些限制时，如何重置输入值呢？

方法一：使用 $rollbackViewValue() 方法

AngularJS 表单控制器中有一个 $rollbackViewValue() 方法，可以直接将视图中的值回滚到模型中的值，从而重置输入框的值。

$scope.reset = function() {
  $scope.myForm.myInput.$rollbackViewValue();
}

以上代码假设有一个名为 myInput 的输入框，它有一个限制条件，当超出限制时，调用 reset() 方法即可重置输入框的值。

方法二：使用 AngularJS 指令

AngularJS 指令可以对表单控件和 DOM 元素进行自定义操作，我们可以编写一个指令来处理重置输入框的值。

angular.module('myApp').directive('resetValue', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.on('input', function() {
        if (this.validity && this.validity.badInput) {
          this.value = '';
        }
      });
    }
  }
});

以上代码中，我们创建了一个名为 resetValue 的指令，当元素的值超出限制时，将值重置为空字符串。

在 HTML 中，我们只需要在输入框上添加 reset-value 属性即可：

<input type="text" name="myInput" ng-model="myModel" reset-value>

总结

当使用 AngularJS 进行表单输入时，如果发现用户输入的值超出了限制条件，我们可以使用 $rollbackViewValue() 方法或编写一个重置指令来重置输入框的值。虽然两种方法都可以达到目的，但从代码复杂度和易用性上考虑，推荐使用 $rollbackViewValue() 方法。