각도 ng-변경 지연

각도 ng-변경 지연

변경 시 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사용하지 않고 매우 쉽게 달성할 수 있는 특성$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);
    }
});

를 사용하여 지연을 추가할 수 있습니다.아마도 를 사용하여$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);
  }
 });

플라스틱

질문이 너무 오래된 거 알아요.하지만 여전히 비난을 통해 이를 달성할 수 있는 한 가지 빠른 방법을 제공하고자 합니다.

그래서 코드는 다음과 같이 쓸 수 있다.

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

데바운스는 밀리초 단위의 숫자를 사용합니다.

또는 angular-ui에서 지시어 'autoahead-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">

언급URL : https://stackoverflow.com/questions/26446681/angular-ng-change-delay