我想在输入完成后触发一个功能
I would like to fire a function after the input has been complete
我想在输入完成后触发一个功能 complete.The 去抖动功能不适用于 me.I 不希望它在焦点外 我希望在 a 上有更少的点击按键触发的功能。
plnkr.co/edit/uDgRNnVh0NUm4z2BbzSj?p=preview
在 Angular 世界中,这是使用 ng-blur
完成的。像这样:
<input type="text" ng-blur="foo()">
在 this answer 的帮助下,我得到了它(我希望)您期望的效果。
http://plnkr.co/edit/f9RaRXjhWZGbTVn0JRno?p=preview
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js@*" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore- min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl" class="container">
<div class="panel panel-primary well">
Input:
<input type="text" ng-model="inputText" />
</div>
{{finalText}}
</body>
</html>
JS
angular.module('app', []);
angular.module('app').controller('mainCtrl', function($scope) {
$scope.inputText = "";
$scope.$watch("inputText", _.debounce(function (text) {
$scope.$apply(function(){
$scope.finalText = text;
});
}, 1000));
});
var timeout,wait,waitTimeout;
function customDebounce() {
var dfd = $q.defer(),
if(!wait) {
FunctionCall().then(function(response){
dfd.resolve(response);
});
wait = true;
waitTimeout = $timeout( function(){wait = false;}, 1000);
}
else {
$timeout.cancel(timeout);
$timeout.cancel(waitTimeout);
timeout = $timeout( function(){
wait = false;
FunctionCall().then(function(response){
dfd.resolve(response);
});
}, 1000);
}
return dfd.promise;
}
我想在输入完成后触发一个功能 complete.The 去抖动功能不适用于 me.I 不希望它在焦点外 我希望在 a 上有更少的点击按键触发的功能。
plnkr.co/edit/uDgRNnVh0NUm4z2BbzSj?p=preview
在 Angular 世界中,这是使用 ng-blur
完成的。像这样:
<input type="text" ng-blur="foo()">
在 this answer 的帮助下,我得到了它(我希望)您期望的效果。
http://plnkr.co/edit/f9RaRXjhWZGbTVn0JRno?p=preview
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js@*" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore- min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl" class="container">
<div class="panel panel-primary well">
Input:
<input type="text" ng-model="inputText" />
</div>
{{finalText}}
</body>
</html>
JS
angular.module('app', []);
angular.module('app').controller('mainCtrl', function($scope) {
$scope.inputText = "";
$scope.$watch("inputText", _.debounce(function (text) {
$scope.$apply(function(){
$scope.finalText = text;
});
}, 1000));
});
var timeout,wait,waitTimeout;
function customDebounce() {
var dfd = $q.defer(),
if(!wait) {
FunctionCall().then(function(response){
dfd.resolve(response);
});
wait = true;
waitTimeout = $timeout( function(){wait = false;}, 1000);
}
else {
$timeout.cancel(timeout);
$timeout.cancel(waitTimeout);
timeout = $timeout( function(){
wait = false;
FunctionCall().then(function(response){
dfd.resolve(response);
});
}, 1000);
}
return dfd.promise;
}