J’ai une entrée qui filtre une liste ng-repeat sur le changement. La répétition contient beaucoup de données et prend quelques secondes pour filtrer tout. Je voudrais qu’ils aient un délai de 0,5 seconde avant de commencer le processus de filtrage. Quelle est la bonne façon angular pour créer ce délai?
Consortingbution
Répéter
{{foo.bar}}
- Placement de la directive ng-app (html vs body)
- Angular.js définit par programmation un champ de formulaire comme étant sale
- AngularJS: la liste ng-repeat n’est pas mise à jour lorsqu’un élément de modèle est épissé à partir du tableau de modèles
- AngularJS – convertir les dates dans le contrôleur
- Comment utiliser dans le matériau angular?
Fonction de filtre
$scope.FilterByName = function () { //Filtering Stuff Here });
Merci
AngularJS 1.3+
Depuis AngularJS 1.3, vous pouvez utiliser la propriété ngModelOptions
pour que cela soit très facile, sans utiliser du tout $timeout
. Voici un exemple:
HTML:
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); }; } ]);
— OU —
Vérifiez le violon
Avant AngularJS 1.3
Vous devrez utiliser $ timeout pour append un délai et probablement avec l’utilisation de $ timeout.cancel (previoustimeout), vous pouvez annuler tout délai d’attente précédent et exécuter le nouveau (aide à empêcher l’exécution du filtrage plusieurs fois consécutives dans un intervalle de temps)
Voici un exemple:
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); } });
Vous pouvez utiliser $timeout
pour append un délai et probablement avec l’utilisation de $timeout.cancel(previoustimeout)
vous pouvez annuler tout délai d’attente précédent et exécuter le nouveau (aide à empêcher l’exécution du filtrage plusieurs fois consécutives dans un intervalle de temps)
Exemple:-
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
Je sais que la question est trop ancienne. Mais toujours vouloir fournir un moyen plus rapide d’y parvenir en utilisant le rebouncing .
Donc, le code peut être écrit comme
Debounce prendra le nombre en millisecondes.
ou vous pouvez utiliser directive ‘typeahead-wait-ms = “1000”‘ de angular-ui