当使用 event.target.value 更新值时，ng-change 不会第二次触发

Question

如果输入的值不是数字，我正在尝试重置 input:textbox 的值。我正在使用 ng-change 来验证输入。参考下面的代码

<input type="text" ng-change="onChange(this.P)" ng-model="P" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Principle" />
<input type="text" ng-change="onChange(this.R)" ng-model="R" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Rate" />
<input type="text" ng-change="onChange(this.T)" ng-model="T" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Time" />

注意从所有三个文本框调用 onChange 函数。

onChange函数如下

$scope.onChange = function(n) {
      if (!$scope.isNumeric(n)) {
        event.currentTarget.value = '';
      }

问题：问题是，如果我输入相同的非数字字母两次，则不会触发 ng-change 事件。

例如，如果 q 键被按下两次，则 ng-change 将不会在第二次按下该键时触发。

参见 jsFiddle here

附加问题：有没有更好的方法来重置文本框的值？

Answer 1

您可以使用输入类型 'number'，这是 HTML5 的内置功能。它只允许数值。您不需要 onChange 函数。

<input type="number" ng-model="P" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Principle" />

但是，角落里有 up/down 个箭头。如果你不需要它们，你可以使用 CSS 隐藏它们。

Answer 2

ng-change 未针对同一字母表再次触发的原因是您正在更新 currentTarget.value 而不是 ng-model。

假设您在文本框中输入 d。现在$scope.P = "d"。现在 ng-change 将触发并且您清除文本框，记住 $scope.P 仍然是 "d"。现在，如果您再次输入 "d"，$watch 将不会触发，因为之前的值是 $scope.P is "d".

要解决此问题，请更新模型而不是 currentTarget.value。

这是更新后的 fiddle：https://jsfiddle.net/vwmfbgy2/4/

Answer 3

您可以将 model 键与 ng-change 一起传递，并且只需更新模型值，这样它就会自动更新您的 input

angular.module('SimpleInterestApp', [])
  .controller('simpleCtrl', function($scope) {

    $scope.onChange = function(obj, modelKey) {

      var n = obj[modelKey];
      if (!$scope.isNumeric(n)) {
        obj[modelKey] = '';
      }
    };

    $scope.isNumeric = function(n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    };


  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>

<body ng-app="SimpleInterestApp" ng-controller="simpleCtrl">
  <div class="container">
    <div class="row">
      <input type="text" ng-change="onChange(this, 'P')" ng-model="P" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Principle" />
      <input type="text" ng-change="onChange(this, 'R')" ng-model="R" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Rate" />
      <input type="text" ng-change="onChange(this, 'T')" ng-model="T" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" placeholder="Time" />
    </div>
  </div>
</body>

当使用 event.target.value 更新值时，ng-change 不会第二次触发

ng-change not triggering for second time when value updated with event.target.value

angularjs

angularjs-ng-change