해결할 수없는 성능 문제가 있습니다. 인스턴트 검색이 있지만 각에서 검색을 시작하기 때문에 다소 게으 릅니다 keyup()
.
JS :
var App = angular.module('App', []);
App.controller('DisplayController', function($scope, $http) {
$http.get('data.json').then(function(result){
$scope.entries = result.data;
});
});
HTML :
<input id="searchText" type="search" placeholder="live search..." ng-model="searchText" />
<div class="entry" ng-repeat="entry in entries | filter:searchText">
<span>{{entry.content}}</span>
</div>
JSON 데이터는 300KB 정도로 크지 않습니다. 필자가 달성해야 할 것은 각 키 입력에 대한 작업을 수행하는 대신 사용자가 입력을 마칠 때까지 검색을 ~ 1 초 지연시키는 것입니다. AngularJS는 내부적 으로이 작업을 수행하며 여기에서 문서 및 기타 주제를 읽은 후에는 구체적인 답변을 찾을 수 없었습니다.
인스턴트 검색을 지연시킬 수있는 방법에 대한 조언을 부탁드립니다.
답변
(Angular 1.3 솔루션에 대해서는 아래 답변을 참조하십시오.)
여기서 문제는 모델이 변경 될 때마다 검색이 실행되며 입력에 대한 모든 키업 동작입니다.
이 작업을 수행하는 더 확실한 방법이 있지만 가장 쉬운 방법은 필터가 작동하는 컨트롤러 내부에 $ scope 속성이 정의되도록 바인딩을 전환하는 것입니다. 그렇게하면 $ scope 변수가 얼마나 자주 업데이트되는지 제어 할 수 있습니다. 이 같은:
JS :
var App = angular.module('App', []);
App.controller('DisplayController', function($scope, $http, $timeout) {
$http.get('data.json').then(function(result){
$scope.entries = result.data;
});
// This is what you will bind the filter to
$scope.filterText = '';
// Instantiate these variables outside the watch
var tempFilterText = '',
filterTextTimeout;
$scope.$watch('searchText', function (val) {
if (filterTextTimeout) $timeout.cancel(filterTextTimeout);
tempFilterText = val;
filterTextTimeout = $timeout(function() {
$scope.filterText = tempFilterText;
}, 250); // delay 250 ms
})
});
HTML :
<input id="searchText" type="search" placeholder="live search..." ng-model="searchText" />
<div class="entry" ng-repeat="entry in entries | filter:filterText">
<span>{{entry.content}}</span>
</div>
답변
최신 정보
이제 그 어느 때보 다 쉬워졌습니다 (Angular 1.3). 모델에 디 바운스 옵션을 추가하기 만하면됩니다.
<input type="text" ng-model="searchStr" ng-model-options="{debounce: 1000}">
업데이트 된 플 런커 :
http://plnkr.co/edit/4V13gK
ngModelOptions에 대한 설명서 :
https://docs.angularjs.org/api/ng/directive/ngModelOptions
오래된 방법 :
각도 자체를 넘어 의존성이없는 또 다른 방법이 있습니다.
시간 초과를 설정하고 현재 문자열을 이전 버전과 비교해야합니다. 둘 다 동일하면 검색을 수행합니다.
$scope.$watch('searchStr', function (tmpStr)
{
if (!tmpStr || tmpStr.length == 0)
return 0;
$timeout(function() {
// if searchStr is still the same..
// go ahead and retrieve the data
if (tmpStr === $scope.searchStr)
{
$http.get('//echo.jsontest.com/res/'+ tmpStr).success(function(data) {
// update the textarea
$scope.responseData = data.res;
});
}
}, 1000);
});
그리고 이것은 당신의 견해에 들어갑니다 :
<input type="text" data-ng-model="searchStr">
<textarea> {{responseData}} </textarea>
필수 플 런커 :
http://plnkr.co/dAPmwf
답변
Angular 1.3에서 나는 이것을 할 것이다 :
HTML :
<input ng-model="msg" ng-model-options="{debounce: 1000}">
제어 장치:
$scope.$watch('variableName', function(nVal, oVal) {
if (nVal !== oVal) {
myDebouncedFunction();
}
});
기본적으로 범위 변수가 변경 myDebouncedFunction()
되면 angular에게 run을 지시합니다 msg
. 이 속성을 ng-model-options="{debounce: 1000}"
사용 msg
하면 1 초에 한 번만 업데이트 할 수 있습니다.
답변
<input type="text"
ng-model ="criteria.searchtext""
ng-model-options="{debounce: {'default': 1000, 'blur': 0}}"
class="form-control"
placeholder="Search" >
이제 ng-model-options 디 바운스를 시간과 함께 설정할 수 있으며 블러, 모델을 즉시 변경해야 할 경우 저장하지 않으면 지연이 완료되지 않으면 이전 값을 갖습니다.
답변
HTML 마크 업에서 키업 / 키 다운을 사용하는 사람들을 위해. 시계를 사용하지 않습니다.
JS
app.controller('SearchCtrl', function ($scope, $http, $timeout) {
var promise = '';
$scope.search = function() {
if(promise){
$timeout.cancel(promise);
}
promise = $timeout(function() {
//ajax call goes here..
},2000);
};
});
HTML
<input type="search" autocomplete="off" ng-model="keywords" ng-keyup="search()" placeholder="Search...">
답변
angularjs에 대한 디 바운스 / 스로틀 모델 업데이트 : http://jsfiddle.net/lgersman/vPsGb/3/
귀하의 경우 jsfiddle 코드에서 지시문을 다음과 같이 사용하는 것 외에는 할 일이 없습니다.
<input
id="searchText"
type="search"
placeholder="live search..."
ng-model="searchText"
ng-ampere-debounce
/>
기본적으로 http://benalman.com/projects/jquery-throttle-debounce-plugin/ 을 사용 하는 “ng-ampere-debounce”라는 단일 각도 지시문으로 구성된 작은 코드로 모든 dom 요소에 첨부 할 수 있습니다. 지시문은 첨부 된 이벤트 핸들러를 재정렬하여 이벤트를 조절할시기를 제어 할 수 있도록합니다.
스로틀 링 / 토론에 사용할 수 있습니다 * 모델 각도 업데이트 * 각도 이벤트 핸들러 ng- [event] * jquery 이벤트 핸들러
보세요 : http://jsfiddle.net/lgersman/vPsGb/3/
이 지침은 Orangevolt Ampere 프레임 워크 ( https://github.com/lgersman/jquery.orangevolt-ampere )의 일부입니다 .
답변
여기에 리디렉션 된 사용자의 경우 :
소개로 Angular 1.3
당신이 사용할 수있는 모델-옵션 NG 속성 :
<input
id="searchText"
type="search"
placeholder="live search..."
ng-model="searchText"
ng-model-options="{ debounce: 250 }"
/>