web-dev-qa-db-ja.com

Angular ng-change delay

変更時にng-repeatリストをフィルタリングする入力があります。リピートには大量のデータが含まれており、すべてをフィルタリングするには数秒かかります。フィルタリングプロセスを開始する前に、0.5秒の遅延を希望します。 この遅延を作成するangularの正しい方法は何ですか？

入力

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

繰り返し

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

フィルター機能

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

ありがとう

angularjsangularjs-directiveangularjs-ng-repeat
109
MGot90

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

$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

18
PSL

私は質問が古すぎることを知っています。ただし、 デバウンス を使用して、これを実現するためのより簡単な方法を提供したいと考えています。

したがって、コードは次のように記述できます。

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

デバウンスはミリ秒単位の数値を取ります。

7
Naibedya Kar

または、 angular-ui からディレクティブ 'typeahead-wait-ms = "1000"'を使用できます

<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">
0
Vadym Kaptan