Winkel-ng-Änderungsverzögerung

Ich habe eine Eingabe, die eine ng-Wiederholungsliste bei Änderung filtert. Die Wiederholung enthält viele Daten und dauert einige Sekunden, um alles zu filtern. Ich möchte eine Verzögerung von 0,5 Sekunden, bevor ich mit dem Filtervorgang beginne. Was ist der richtige Weg im Winkel, um diese Verzögerung zu erzeugen?

Eingang

 <input ng-model="xyz" ng-change="FilterByName()" />

Wiederholen

 <div ng-repeat"foo in bar">
      <p>{{foo.bar}}</p>
 </div>

Filterfunktion

 $scope.FilterByName = function () {
      //Filtering Stuff Here
 });

Vielen Dank

AngularJS 1.3+

Seit AngularJS 1.3 können Sie die debounceEigenschaft nutzen ngModelOptions, um dies sehr einfach ohne Verwendung zu erreichen$timeout überhaupt zu verwenden. Hier ist ein Beispiel:

HTML:

<div ng-app='app' ng-controller='Ctrl'>
    <input type='text' placeholder='Type a name..'
        ng-model='vm.name'
        ng-model-options='{ debounce: 1000 }'
        ng-change='vm.greet()'
    />

    <p ng-bind='vm.greeting'></p>
</div>

JS:

angular.module('app', [])
.controller('Ctrl', [
    '$scope',
    '$log',
    function($scope, $log){
        var vm = $scope.vm = {};

        vm.name = '';
        vm.greeting = '';
        vm.greet = function greet(){
            vm.greeting = vm.name ? 'Hey, ' + vm.name + '!' : '';
            $log.info(vm.greeting);
        };
    }
]);

-- ODER --

Überprüfen Sie die Geige

Vor AngularJS 1.3

Sie müssen $ timeout verwenden, um eine Verzögerung hinzuzufügen, und wahrscheinlich können Sie mit $ timeout.cancel (previoustimeout) jedes vorherige Timeout abbrechen und das neue ausführen (dies verhindert, dass die Filterung innerhalb von a mehrmals hintereinander ausgeführt wird Zeitintervall)

Hier ist ein Beispiel:

app.controller('MainCtrl', function($scope, $timeout) {
    var _timeout;

    //...
    //...

    $scope.FilterByName = function() {
        if(_timeout) { // if there is already a timeout in process cancel it
            $timeout.cancel(_timeout);
        }
        _timeout = $timeout(function() {
            console.log('filtering');
            _timeout = null;
        }, 500);
    }
});

Sie könnten verwenden $timeout, um eine Verzögerung hinzuzufügen und wahrscheinlich mit der Verwendung von$timeout.cancel(previoustimeout) Option eine frühere Zeitüberschreitung abbrechen und die neue ausführen (dies verhindert, dass die Filterung innerhalb eines Zeitintervalls mehrmals hintereinander ausgeführt wird).

Beispiel:-

app.controller('MainCtrl', function($scope, $timeout) {
  var _timeout;

 //...
 //...

  $scope.FilterByName = function () {
    if(_timeout){ //if there is already a timeout in process cancel it
      $timeout.cancel(_timeout);
    }
    _timeout = $timeout(function(){
      console.log('filtering');
      _timeout = null;
    },500);
  }
 });

Plnkr

Ich weiß, dass die Frage zu alt ist. Aber ich möchte immer noch einen schnelleren Weg bieten, um dies durch Entprellen zu erreichen .

So kann der Code geschrieben werden als

<input ng-model="xyz" ng-change="FilterByName()" ng-model-options="{debounce: 500}"/>

Bei der Entprellung wird die Zahl in Millisekunden angegeben.

oder Sie können die Direktive 'typeahead-wait-ms = "1000"' von angle -ui verwenden

<input 
   typeahead="name for name in filterWasChanged()"
   typeahead-wait-ms="1000"
   type="text" placeholder="search"
   class="form-control" style="text-align: right" 
   ng-model="templates.model.filters.name">