角度ng变化延迟

Question

我有一个输入,可以在更改时过滤ng-repeat列表.重复包含大量数据,需要几秒钟来过滤所有内容.在开始过滤过程之前,我希望它们延迟0.5秒.角度创建此延迟的正确方法是什么？

输入

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

重复

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

过滤功能

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

谢谢

Answer 1

AngularJS 1.3+

从AngularJS 1.3开始,您可以利用提供的debounce属性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);
        };
    }
]);

- 要么 -

检查小提琴

在AngularJS 1.3之前

您将不得不使用$ timeout来添加延迟,并且可能使用$ timeout.cancel(previoustimeout)您可以取消任何先前的超时并运行新的超时(有助于防止过滤在多个时间内执行多次时间间隔)

这是一个例子:

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

您可以使用$timeout添加延迟,并且可能使用$timeout.cancel(previoustimeout)您可以取消任何先前的超时并运行新的超时(有助于防止过滤在一个时间间隔内多次执行)

例:-

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

我知道这个问题太老了.但仍希望通过使用去抖动来提供一种更快的方法来实现这一点.

所以代码可以写成

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

去抖将以毫秒为单位.