keyup in build directive of angular for filtering the record but I want to delay the function call so user can enter the full word and call can go to DB and fetch the record instead of single word. my line of code is
<input ng-show="!$scope.noRPData" type="text" ng-keyup="filterRP($event)" class="filterRP form-control" id="txtFilterID" ng-model="rpFilter.ModifiedDate.value" />
filterRP is the function for which I want to delay the call by 4 second. Please suggest
I would recommend using ng-change instead of ng-keyup. You can than add the ng-model-options and configure the debounce time there. Then, your model will get changed only after this debounce time period has passed. See the Debouncing updates docs section.
UPDATE:
Both ng-change and $scope.$watch should work with ng-model-options debounce option (in AngularJS v1.6.10). See this Plunker
$scope.$watch instead of ng-change like this: $scope.$watch('user.name', function() { ... });, see this PlunkerYou would need to delay it with $timeout (with additional if statement, to prevent calling every time a key is pressed). Then send some data within that timeout with $http.post request. Here is a simple demo that you can adopt for your example:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout, $http) {
var typing = false;
$scope.filterRP = function(e) {
if (!typing) {
typing = true;
$timeout(function() {
typing = false;
console.log("sending", $scope.x);
/*
var data = {"input":$scope.x}
$http.post(url,data).
then(function(response){
// do something with response.data;
},function(error){
// log error
});
*/
}, 4000) // 4 second delay
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-keyup="filterRP($event)" ng-model="x" />
</div>
debounce functionality.
timeoutin youfilterRP()