AngularJS - Fire $ timeout event su ng-change solo una volta

Ho una modifica ng su un campo di input in html associato a una variabile di ambito.

<input type="text" ng-model="test" ng-change="change()" required> 

var change = function(){ redraw_graph()}

Ora quando cambio la casella di input, ridisegna il grafico per ogni nuovo carattere che scrivo. Voglio avere un ritardo (N secondi), così angolare attenderà prima che l'utente abbia finito di digitare prima che l'evento ng-change venga attivato. E se si verificano più eventi di ng-change, annulla quelli precedenti e esegue solo quelli più recenti.

Ho incorporato il ritardo con un timeout, ma dopo N secondi l'evento ng-change scatta ancora più di una volta. Ho già risolto questo problema, ma non riesco a capire come farlo al momento.

fonte

2014-10-09 Michael

Annullare la esistente '$ timeout' prima di richiamare una nuova. – Blackhole

Sulla base del suggerimento di @ Blackhole, è possibile risolvere questo problema annullando il timeout $ originale.

Ecco come si dovrebbe fare:

var timer; 

$scope.change = function(){ 
    $timeout.cancel(timer); 

    timer = $timeout(function() { 
      redraw_graph() 
      },2000); 
}

Controlla qui sotto plunker per vedere come funziona. Una finestra di avviso (solo una) apparirà 2 secondi dopo aver terminato tutte le modifiche nel campo di immissione. Cioè, se si modifica il campo di immissione prima di 2 secondi, si ritarda il popup di altri 2 secondi.

http://plnkr.co/edit/v08RYwCDVtymNrgs48QZ?p=preview

EDIT
Mentre sopra è un metodo di farlo, AngularJS ha messo a punto la propria implementazione di questa funzione particolare v1.3 +. ngModelOptions può essere utilizzato.

fonte

2014-10-09 19:55:29 Angad

Si potrebbe verificare UnderscoreJS, che ha .debounce() e .throttle()

fonte

2014-10-09 20:02:37

'debounce' è già incluso in' ng-model-options' di angular senza bisogno di underscore (anche se è una bella libreria) –

A me sembra che quello che stai chiedendo è già incorporato nel AngularJS. Così, se si fanno uso di direttiva del ngModelOptions è possibile utilizzare la proprietà debounce:

ng-model-options="{ debounce: 1000 }"

Per citare la documentazione

.. "/ o di un ritardo antirimbalzo in modo che il l'aggiornamento effettivo ha luogo solo allo quando scade un timer, questo timer verrà resettato dopo un altro cambio . "

campione Lavorare

angular.module('optionsExample', []) 
 
    .controller('ExampleController', ['$scope', 
 
     function($scope) { 
 
     $scope.user = { 
 
      name: 'say' 
 
     }; 
 
     } 
 
    ]);

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-ngModelOptions-directive-debounce-production</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-app="optionsExample"> 
 
    <div ng-controller="ExampleController"> 
 
    <form name="userForm"> 
 
     Name: 
 
     <input type="text" 
 
      name="userName" 
 
      ng-model="user.name" 
 
      ng-model-options="{ debounce: 1000 }" /> 
 
     <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button> 
 
     <br /> 
 
    </form> 
 
    <pre>user.name = <span ng-bind="user.name"></span></pre> 
 
    </div> 
 
</body> 
 

 
</html>

fonte

2014-10-09 20:25:14

AngularJS - Fire $ timeout event su ng-change solo una volta

risposta

Problemi correlati