Angularjs: input [text] ngChange se déclenche pendant que la valeur change
ngChange se déclenche pendant que la valeur change (ngChange ne sont pas similaires à l'événement onChange classique). Comment puis-je lier l'événement onChange classique avec angularjs, qui ne se déclenche que lorsque le contenu est Commité?
Actuelle de liaison:
<input type="text" ng-model="name" ng-change="update()" />
8 réponses
Ce post montre un exemple d'une directive que les retards les changements de modèle à une entrée jusqu'à ce que le flou événement se déclenche.
ici est un violon qui montre le ng-change travaillant avec la nouvelle directive ng-model-on-flou. Notez qu'il s'agit d'une légère modification au violon original .
si vous ajoutez la directive à votre code, vous changerez votre reliure à ceci:
<input type="text" ng-model="name" ng-model-onblur ng-change="update()" />
Voici la directive:
// override the default input to update on blur
angular.module('app', []).directive('ngModelOnblur', function() {
return {
restrict: 'A',
require: 'ngModel',
priority: 1, // needed for angular 1.2.x
link: function(scope, elm, attr, ngModelCtrl) {
if (attr.type === 'radio' || attr.type === 'checkbox') return;
elm.unbind('input').unbind('keydown').unbind('change');
elm.bind('blur', function() {
scope.$apply(function() {
ngModelCtrl.$setViewValue(elm.val());
});
});
}
};
});
Note: comme @wjin le mentionne dans les commentaires ci-dessous, cette fonctionnalité est prise en charge directement dans L'angle 1.3 (actuellement en beta) via ngModelOptions . Voir les docs pour plus d'info.
il s'agit d'ajouts récents à AngularJS, pour servir de réponse future (également pour une autre question ).
Angular nouvelles versions (maintenant en beta 1.3), AngularJS soutient nativement cette option, en utilisant ngModelOptions , comme
ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
exemple:
<input type="text" name="username"
ng-model="user.name"
ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />
dans le cas où n'importe qui d'autre recherche pour" entrer "supplémentaire le soutien de keypress, voici une mise à jour au violon fourni par maussade 151960920""
Code pour la reliure au clavier:
elm.bind("keydown keypress", function(event) {
if (event.which === 13) {
scope.$apply(function() {
ngModelCtrl.$setViewValue(elm.val());
});
}
});
pour quiconque lutte avec IE8 (il n'aime pas le unbind('input'), j'ai trouvé un moyen de contourner.
injectez $sniffer dans votre directive et utilisez:
if($sniffer.hasEvent('input')){
elm.unbind('input');
}
IE8 calme si vous faites ceci:)
à ma connaissance, nous devrions utiliser ng-change avec l'option select et dans le cas de textbox nous devrions utiliser ng-blur.
N'utilise pas $scope.$montre pour refléter les modifications de la portée de la variable de mieux?
outrepasse le comportement d'entrée onChange par défaut (appeler la fonction seulement lorsque le contrôle de perte de focalisation et de la valeur a modifier)
NOTE: ngChange n'est pas similaire à l'événement onChange classique qu'il déclenche l'événement pendant que la valeur change cette directive stocke la valeur de l'élément quand il obtient la mise au point
Sur les flous, il vérifie si le nouvelle valeur a changé et si oui, il déclenche l'événement@param {String} - nom de la fonction à invoquer lorsque le " onChange" devrait être tiré
@exemple < input ma-sur-le changement="mafonction" ng-model="modèle">
angular.module('app', []).directive('myOnChange', function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
myOnChange: '='
},
link: function (scope, elm, attr) {
if (attr.type === 'radio' || attr.type === 'checkbox') {
return;
}
// store value when get focus
elm.bind('focus', function () {
scope.value = elm.val();
});
// execute the event when loose focus and value was change
elm.bind('blur', function () {
var currentValue = elm.val();
if (scope.value !== currentValue) {
if (scope.myOnChange) {
scope.myOnChange();
}
}
});
}
};
});
j'ai eu exactement le même problème et cela a fonctionné pour moi. Ajoutez ng-model-update et ng-keyup et vous êtes prêt à partir! Voici le docs
<input type="text" name="userName"
ng-model="user.name"
ng-change="update()"
ng-model-options="{ updateOn: 'blur' }"
ng-keyup="cancel($event)" />