Độ trễ ng-thay đổi góc

Tôi có một đầu vào lọc danh sách ng-lặp lại khi thay đổi. Việc lặp lại chứa rất nhiều dữ liệu và mất vài giây để lọc qua mọi thứ. Tôi muốn chúng trễ 0,5 giây trước khi tôi bắt đầu quá trình lọc. Cách đúng trong góc để tạo ra độ trễ này là gì?

Đầu vào

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

Nói lại

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

Chức năng lọc

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

Cảm ơn

AngularJS 1.3+

Kể từ AngularJS 1.3, bạn có thể sử dụng thuộc debouncetính được ngModelOptionscung cấp để đạt được điều đó rất dễ dàng mà không cần sử dụng$timeout chút nào. Đây là một ví dụ:

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

-- HOẶC LÀ --

Kiểm tra Fiddle

Trước AngularJS 1.3

Bạn sẽ phải sử dụng $ timeout để thêm thời gian trễ và có thể với việc sử dụng $ timeout.cancel (trước đó hết thời gian), bạn có thể hủy bất kỳ thời gian chờ nào trước đó và chạy thời gian chờ mới (giúp ngăn việc lọc được thực hiện nhiều lần một cách nhất quán trong một Khoảng thời gian)

Đây là một ví dụ:

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

Bạn có thể sử dụng $timeoutđể thêm thời gian trễ và có thể với việc sử dụng $timeout.cancel(previoustimeout)bạn có thể hủy bỏ bất kỳ thời gian chờ nào trước đó và chạy thời gian chờ mới (giúp ngăn bộ lọc được thực hiện nhiều lần một cách nhất quán trong một khoảng thời gian)

Thí dụ:-

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

Tôi biết câu hỏi đã quá cũ. Nhưng vẫn muốn cung cấp một cách nhanh hơn để đạt được điều này bằng cách sử dụng gỡ lỗi .

Vì vậy, mã có thể được viết là

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

Debounce sẽ lấy số lượng tính bằng mili giây.

hoặc bạn có thể sử dụng chỉ thị 'typeahead-wait-ms = "1000"' từ angle-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">