Angular js ng-change event

Question

I am using angular js in my application. where in the ng-change event I call webservice and based on the response displaying html. but here in ng-change they call too often, where we print fast, which makes the browser wait. this is not a chrome and mozilla problem. can anyone help me here?

Answer 1

You can use the timeout and wait until the user finishes entering before making a call to the server:

<input type="text" ng-model="some.thing" ng-change="fetchData()" />

app.controller('someCtrl', function ($scope, $timeout) {
    var fetchDataDelay = 500;   // milliseconds
    var fetchDataTimer;

    $scope.fetchData = function () {
        $timeout.cancel(fetchDataTimer);
        fetchDataTimer = $timeout(function () {
            // make expensive call to the server...
        }, fetchDataDelay);
    };
});

, Angular $timeout ( setTimeout/clearTimeout) Angular ( $apply() $digest()).

Answer 2

, debounced search. , , :

, ng-model

<input ng-model="searchText" ng-model-options="{ debounce: 500 }" type="text" class="form-control" placeholder="Search...">

, ng-model-options = "{debounce: 500}". . , ng-model-options .

$watch :

    $scope.$watch('searchText', function(newValue) {
        // expensive ajax call
    });

, $watch . , , . "searchText", , .

, ng-model, "searchText", , , ajax ( ).

, .:)

Answer 3

debounce :

.factory('myFactory', function($http) {
  var debounce;
  var doRequest = function() {
    clearTimeout(debounce);
    setTimeout(function() {
      // Make HTTP call here
    }, 333);
  };
  return {
    doRequest: doRequest
  };
});

, , - 333 . , , .

333 - , Google , , .

Answer 4

$watch $watchCollection .

$watch $watchCollection , ng-change.

,

$scope.$watchCollection('[some_modelname,someother_modelname]',function(){
            alert('Changed the input value!');
        });
$scope.$watch('some_modelname',function(){
            alert('Changed the input value!');
        });

HTML,

<input type="text" ng-model="some_modelname" id="someid" name="somenameifneeded" value=""/>
<input type="text" ng-model="someother_modelname" id="someotherid" name="somenameifneeded" value=""/>

$watch $watchCollection . - , , . , .

Answer 5

angularjs 1/3 debounce, ng-options , ng-change, .

ng-model-options="{debounce: {'default': 500} }

Answer 6

- . , . :

$scope.loadData = function () {
   var loadThrottle;
   clearTimeout(loadThrottle);
   loadThrottle = setTimeout(function () {
       $scope.$apply(function () {
           $scope.getData();
       });
   }, 500);
};

, , - 500 .

( ):

$scope.loadData = function(timeout) {
     $scope.counter += 1;
     var counter = $scope.counter;
     $timeout(function(){
         if (counter === $scope.counter) {
             $scope.getData();
             $scope.counter = 0;
         }
     }, timeout ? timeout : 500);
}

, - :

app.directive('changeTimeout', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
            angular.forEach(ctrl.$viewChangeListeners, function(listener, index) {
                ctrl.$viewChangeListeners[index] = _.debounce(function() {
                    scope.$apply(attrs.ngChange);
                }, attrs.changeTimeout || 0)
            });
        }
    }
});