當使用event.target.value更新值時ng-change不會觸發第二次

如果輸入的值是非數字，我試圖重置input:textbox的值。我正在使用ng-change來驗證輸入。請參閱下面的代碼當使用event.target.value更新值時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

其他問題：有沒有更好的方式來重置文本框的值？

來源

2017-07-20 Taleeb

原因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/

來源

2017-07-20 07:22:43 Sid

您可以使用輸入類型'數字'，這是HTML5的內置功能。它只允許數字值。你不需要onChange功能。

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

但是，它帶有在角落的向上/向下箭頭。如果你不需要它們，你可以用CSS隱藏它們。

來源

2017-07-20 07:07:20 KKK

謝謝。這確實解決了手頭的問題，但我不相信是對ng-change事件沒有第二次觸發的通用解決方案。 – Taleeb

你可以通過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>

來源

2017-07-20 07:26:54

當使用event.target.value更新值時ng-change不會觸發第二次

回答

相關問題