Ayant une entrée de texte que je veux savoir immédiatementlorsque l'utilisateur modifie le texte, mais je souhaite également utiliser la fonction anti-rebond. De cette façon, je peux, par exemple, désactiver un bouton d'envoi pendant que l'utilisateur modifie le texte et activer le bouton d'envoi après avoir vérifié le texte dans la fonction anti-rebond.
Y a-t-il un moyen de le faire avec AngularJS pur? Ou dois-je utiliser javascript / jquery?
Avec ce code, je ne peux savoir que lorsque l'utilisateur a changé le texte après le délai de rebond de 500 ms:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://localhost/js/angular.min.js"></script>
<script>
var app= angular.module("app",[]);
app.controller("ExampleController",["$scope",function($scope){
$scope.changed= "";
$scope.change= function(){
$scope.changed= "Changed!";
};
}]);
</script>
</head>
<body ng-controller="ExampleController">
<div>Message: <input type="text" ng-model="model.message"
ng-model-options="{debounce:500}" ng-change="change()" />
<div>{{model.message}}</div>
<div>{{changed}}</div>
</body>
</html>
Réponses:
0 pour la réponse № 1Votre principale option consiste à écrire votre propre code anti-rebond en utilisant ng-keyup. Chaque fois qu'une touche est enfoncée, vous serez informé de la modification (et la modification sera présente dans le ng-model valeur) et vous pouvez utiliser votre propre setTimeout là, avec la fonction anti-rebond souhaitée comme rappel. Si le délai est déjà défini, annulez-le simplement et redémarrez-le à chaque pression de touche.
0 pour la réponse № 2
Utilisation $scope.$watch("model-name", function(){...}
0 pour la réponse № 3
angular.module("customControl").
directive("contenteditable", [function() {
return {
restrict: "A", // only activate on element attribute
require: "?ngModel", // get a hold of NgModelController
link: function(scope, element, attrs, ngModel) {
if (!ngModel) return; // do nothing if no ng-model
ngModel.$parsers.push(function(value) {
// do what you want to happen before "debounce"
// debounce here by waiting 500ms
});
}
};
}]);
la source: https://code.angularjs.org/1.4.1/docs/api/ng/type/ngModel.NgModelController
0 pour la réponse № 4
Ne pouvant pas le faire de manière simple, j'ai fini de le faire en dehors de la bibliothèque angular with underscore. C'est la meilleure option que j'ai trouvée.
Voici mon code:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://localhost/js/angular.min.js"></script>
<script src="http://localhost/js/underscore.js"></script>
<script>
var underscore= angular.module("underscore",[]);
underscore.factory("_",function(){
return window._; // assumes underscore has already been loaded on the page
});
var app= angular.module("app",["underscore"]);
app.controller("ExampleController",["$scope","_",function($scope,_){
$scope.changed= "";
$scope.change= function(){
$scope.debounceMessage($scope);
};
$scope.debounceMessage= _.debounce(function($scope){
$scope.$apply(function(){
$scope.changed= "Delayed: "+$scope.model.message;
});
}, 500);
}]);
</script>
</head>
<body ng-controller="ExampleController">
<div>Message: <input type="text" ng-model="model.message"
ng-change="change()" />
<div>{{model.message}}</div>
<div>{{changed}}</div>
</body>
</html>