각도 변경 지연

Question

변경 사항이있을 때 ng-repeat 목록을 필터링하는 입력이 있습니다. 반복에는 많은 양의 데이터가 포함되어 있으며 모든 것을 필터링하는 데 몇 초가 걸립니다. 나는 필터링 과정을 시작하기 전에 그들의 0.5 초 지연을 원합니다. 이 딜레이를 생성하는 각도가 올바른 방법은 무엇입니까?

입력

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

반복

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

필터 (Filter) 기능

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

감사

는 당신은 지연을 추가하고 아마 $timeout.cancel(previoustimeout)의 사용과 새를 이전 시간 제한을 취소하고 실행할 수 있습니다 $timeout를 사용할 수

Answer 1

gularJS 1.3 이상은

AngularJS와 1.3 이후에는 debounce 재산 ngModelOptions 전혀 $timeout를 사용하지 않고이 매우 쉽게 달성하기 위해 제공 활용할 수 있습니다. AngularJS와 1.3 전에

Check the Fiddle

- 또는 -

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

:

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 여기 예제

$ 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

는

(필터링을 방지하는 데 도움이 consecutovely 시간 간격 내에서 여러 번 실행되는)

예 : -

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

나는 질문이 너무 오래 알고 consecutovely 여기

) 시간 간격 내에서 시간은 예입니다. 그러나 debouncing을 사용하여이를 달성하는 더 빠른 방법을 제공하고 싶습니다.

은 그래서 코드는 밀리 초 단위로 숫자를 취할 것

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

디 바운스

과 같이 쓸 수있다.

Answer 4

또는 그냥가 500ms에 대한`$의 timeout`를 사용 angular-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">