[解決済み] 角度変化遅延

質問

私は、変更時に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
 });

ありがとうございます。

どのように解決するのですか？

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

-- OR --

フィドルを確認する

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