angularJs에서 검색 텍스트 상자를 프로그래밍하는 올바른 방법

Question

내 응용 프로그램의 여러 부분에서 매우 일반적인 기능은 문자열을 허용 한 다음 문자열을 기반으로 테이블을 필터링하는 검색 상자입니다.

내가 목표로하는 것은 사용자가 무언가를 입력 할 수 있도록 허용하는 기능이며 결과가 자동으로 업데이트되기까지 몇 밀리 초가 지나면 자동으로 허용됩니다. 입력 버튼을 누르지 않아도됩니다.

물론 데이터 정렬은 AngularJs 필터를 사용하여 수행 할 수 있습니다. 그러나 필터를 업데이트하기 전에 사용자가 입력을 완료하고 결과를 기다리고 있음을 먼저 이해해야한다고 생각합니다.

그래서 검색 입력 상자에 첨부 될 지시문을 매핑했습니다.

<input type="text" update-filter placeholder="Enter search term"> 


//and the directive goes like this 
app.directive('updateFilter', [ '$timeout', function($timeout){ 
    var delay; 
    return { 
    link: function(scope, element){ 
     element.on('keypress', function(){ 
      if(!delay) { 
       delay = $timeout(function() { 
        //perform the activity of updating the filter here 
       delay = undefined; 
       },50); 
      } 
     } 
    } 
    } 
}); 

제 질문은이 문제를 해결하는 데 올바른 접근 방식입니까? 아니면 더 나은 해결책이 있습니까?

Answer 1

당신은 이것을 과장하고 있습니다. 그것은 각도에서 훨씬 쉽게 할 수 있습니다.

<input type="text" ng-model="query" ng-model-options="{ debounce: 200 }" 
    ng-change="doSearch()"> 

컨트롤러의 쿼리에 액세스하려면 $scope.query을 사용하십시오. 검색을 수행하려면 $scope.doSearch()을 정의하십시오. debounce 옵션은 사용자가 타이핑을 마친 후 200ms를 기다리는 데 사용됩니다.

Answer 2

필터를 쓸 때 필터 입력에 ng-model을 사용하여 필터 값에 액세스 한 다음 해당 값을 ng-repeat 필터 값에 직접 사용합니다. 값에 의해 필터링 된 반복 표 행이, 위의 모델이야 여기

<input type="text" ng-model="user_filter" /> 

그리고 : : 예를 들어, 여기에 필터 값을 얻을 수있는 입력의 즉시 입력 할

<tr ng-repeat="user in users | filter: user_filter"> 

, 각 레지스터 새를 값이 적용되고 필터가 적용됩니다. 각도는 매핑 된 값을 적용하기 때문에 어떤 작업을 기다리거나 수행 할 필요가 없습니다.

Angular docs on filter을 확인하십시오. 이 페이지에는 작동중인 것을 보여주는 작동 예제가 있습니다.