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

您可以使用输入类型＆＃39;数字＆＃39;这是HTML5的内置功能。它只允许数值。你不需要onChange功能。

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

但是，角落里有向上/向下箭头。如果您不需要，可以使用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。

这是更新的小提琴：https://jsfiddle.net/vwmfbgy2/4/

Answer 3

您可以将model密钥与ng-change一起传递，只需更新模型值即可自动更新input

＆＃13;

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);
    };


  });

＆＃13;

<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>

＆＃13;

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

3 个答案: