ng-change ne se déclenche pas pour la deuxième fois lorsque la valeur est mise à jour avec event.target.value

J'essaie de réinitialiser la valeur de input:textbox si la valeur entrée est non numérique. J'utilise ng-change pour valider l'entrée. Reportez-vous au code ci-dessousng-change ne se déclenche pas pour la deuxième fois lorsque la valeur est mise à jour avec event.target.value

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

Remarque La fonction onChange est appelée depuis les trois zones de texte.

La fonction onChange est la suivante

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

Problème: Le problème est que si j'entre le même alphabet non numérique deux fois l'événement ng-change ne se déclenche pas.

Par exemple, si la touche q est enfoncée deux fois, ng-change ne se déclenchera pas lorsque vous appuyez une deuxième fois sur la touche.

Voir jsFiddle here

question supplémentaire: Y at-il une meilleure façon de réinitialiser la valeur de la zone de texte?

Source

2017-07-20 Taleeb

La raison ng-change ne renvoie pas le même alphabet car vous mettez à jour le currentTarget.value mais pas le ng-model.

Supposons que vous saisissez d dans la zone de texte. Maintenant $scope.P = "d". Maintenant ng-change tirera et vous effacez la zone de texte, rappelez-vous $scope.P est toujours "d". Maintenant, si vous entrez "d" nouveau $watch ne tirera pas parce que la valeur précédente de $scope.P is "d".

Pour résoudre cette mise à jour, utilisez le modèle au lieu de currentTarget.value.

Voici le violon mis à jour: https://jsfiddle.net/vwmfbgy2/4/

Source

2017-07-20 07:22:43 Sid

Vous pouvez utiliser le type d'entrée "number" qui est une fonctionnalité intégrée de HTML5. Il autorise uniquement les valeurs numériques. Vous n'avez pas besoin de la fonction onChange.

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

Cependant, cela vient avec des flèches haut/bas dans le coin. Vous pouvez les cacher avec CSS si vous n'en avez pas besoin.

Source

2017-07-20 07:07:20 KKK

Merci. Cela résout le problème, mais je ne crois pas qu'une solution générique à l'événement 'ng-change' ne déclenche pas la deuxième fois. – Taleeb

Vous pouvez passer model clé avec ng-change et simplement mettre à jour la valeur de modèle il mettra à jour automatiquement votre 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>

Source

2017-07-20 07:26:54

ng-change ne se déclenche pas pour la deuxième fois lorsque la valeur est mise à jour avec event.target.value

Répondre

Questions connexes