値がevent.target.valueで更新されたときにng-changeが2度目にトリガされない

入力された値が数値でない場合、input:textboxの値をリセットしようとしています。私は入力を検証するためにng-changeを使用しています。以下のコードを参照してください値がevent.target.valueで更新されたときにng-changeが2度目にトリガされない

<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関数は3つのテキストボックスすべてから呼び出されています。

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

問題を次のように

onChange機能は次のとおりです。問題は、私は同じ数字以外のアルファベットを入力すると、二回ng-changeイベントがトリガされていないということです。

たとえば、キーqを2回押すと、ng-changeは、キーを2回押したときにトリガーされません。

参照jsFiddle here

追加の質問：テキストボックスの値をリセットする任意のより良い方法はありますか？

出典

2017-07-20 Taleeb

理由ng-changeは、currentTarget.valueでは更新されていますが、ng-modelでは更新されていないため、同じアルファベットでは再び発生しません。

テキストボックスにdを入力するとします。今$scope.P = "d"。今ng-changeが起動し、テキストボックスをクリアすると、$scope.Pはまだ"d"であることを忘れないでください。今すぐ"d"と入力した場合は、前回の値が$scope.P is "d"のため、$watchは発生しません。

これを解決するには、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

はありがとうございます。これは手元の問題を解決しますが、2回目の起動ではない 'ng-change'イベントの一般的な解決策ではないと私は信じています。 – Taleeb

あなたはng-changeとともにmodelキーを渡し、それが自動的に更新されますので、ちょうどモデル値を更新することができ、あなたの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が2度目にトリガされない

答えて

関連する問題