Açısal ng-değişim gecikmesi

Değişiklik durumunda ng-tekrar listesini filtreleyen bir girişim var. Yineleme çok fazla veri içerir ve her şeyi filtrelemek birkaç saniye sürer. Filtreleme işlemine başlamadan önce 0,5 saniyelik gecikme olmasını istiyorum. Bu gecikmeyi yaratmanın doğru açısal yolu nedir?

Giriş

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

Tekrar et

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

Filtre Fonksiyonu

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

Teşekkürler

AngularJS 1.3+

AngularJS 1.3 sayesinde, hiç kullanmadan bunu çok kolay bir şekilde gerçekleştirmenizi sağlayan debounceözellikten yararlanabilirsiniz . İşte bir örnek:ngModelOptions$timeout

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

- VEYA -

Fiddle'ı kontrol edin

AngularJS 1.3'ten önce

Bir gecikme eklemek için $ timeout kullanmanız gerekecek ve muhtemelen $ timeout.cancel (previoustimeout) kullanarak önceki herhangi bir zaman aşımını iptal edebilir ve yenisini çalıştırabilirsiniz (filtrelemenin bir Zaman aralığı)

İşte bir örnek:

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

Sen kullanabilirsiniz $timeoutkullanımı ile muhtemelen bir gecikme ve eklenecek $timeout.cancel(previoustimeout)yenisini daha önceki zaman aşımı iptal edip çalıştırabilirsiniz size (bir zaman aralığı içinde consecutovely yürütülecek birden çok kez filtreleme önlemeye yardımcı olur)

Misal:-

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

Sorunun çok eski olduğunu biliyorum. Ancak yine de, debouncing kullanarak bunu başarmanın daha hızlı bir yolunu sağlamak istiyoruz .

Böylece kod şu şekilde yazılabilir:

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

Geri tepme, sayıyı milisaniye olarak alacaktır.

veya angular-ui'den 'typeahead-wait-ms = "1000"' yönergesini kullanabilirsiniz.

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