Ritardo cambiamento ng.

Question

Ho un input che filtra una lista di ripetizioni ng al cambiamento. La ripetizione contiene molti dati e richiede alcuni secondi per filtrare tutto. Vorrei che il loro fosse un ritardo di 0,5 secondi prima di iniziare il processo di filtraggio. Qual è il modo corretto in angolare per creare questo ritardo?

ingresso

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

Ripetere

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

Filtro Funzione

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

Grazie

Answer 1

An gularJS 1.3+

Dal AngularJS 1.3 si può utilizzare la proprietà debouncengModelOptions prevede il raggiungimento di tale molto facile senza usare $timeout a tutti. Ecco un esempio:

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); 
     }; 
    } 
]); 

- oppure -

Check the Fiddle

Prima AngularJS 1.3

Dovrete usare $ timeout per aggiungere un ritardo e, probabilmente, con l'uso di $ timeout.cancel (previoustimeout) si può annullare qualsiasi timeout precedente ed eseguire il nuovo (aiuta a prevenire il filtraggio da eseguire multipla volte consecutovely all'interno di un intervallo di tempo)

Ecco un esempio:

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); 
    } 
}); 

Answer 2

Si potrebbe utilizzare $timeout per aggiungere un ritardo e, probabilmente, con l'uso di $timeout.cancel(previoustimeout) si può annullare qualsiasi timeout precedente ed eseguire il nuovo (aiuta a prevenire il filtraggio deve essere eseguito più volte consecutovely all'interno di un intervallo di tempo)

Esempio: -

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

Answer 3

so che la questione è troppo vecchio. Ma voglio ancora fornire un modo più rapido per raggiungere questo obiettivo utilizzando debouncing.

modo che il codice può essere scritta come

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

Debounce prenderà il numero in millisecondi.

Answer 4

oppure è possibile utilizzare la direttiva 'typeahead-wait-ms = "1000"' dal angular-ui

<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">