I have a 성능 문제를 해결할 수 있는 t # 39, 내가 can& 것 같다. 하지만 나는 인스턴트 검색을 시작합니다 다소 랙이 it& # 39 의 hema*를 키우프 때문에 각 ' ()'.
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>
내가 어떤 방법에 대한 포인터 인스턴트 검색을 지연입니다 감사히 여길 수 있어요.
'< 입력입니다 유형 = " text";; ng 모델 = " searchstr"; = {데버런스 ng 모델 옵션 ". 1000년} ", >. '
업데이트되도록 프룬커: http://plnkr.co/edit/4V13gK
관한 문서가 영모들로티언스: 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
자세한 내용은 아래 질문에 대한 각 1.3 솔루션이므로)
문제는 검색 모델 변경, 이는 모든 작업이 진행될 때마다 키우프 협력하였습니다 입력입니다.
아마도 가장 손쉬운 방법이 있을 수 있지만, 더 좋은 방법이 있습니다 약간만이라도 전환할 수 있도록 정의된 범위 내에 있는 재산 $ 바인딩하면 투명지에 컨트롤러거 너회의 거르개 운영하고 있다. 얼마나 자주 유효범위 가변입니다 업데이트되도록 이쪽요 만 달러 를 제어할 수 있습니다. 이 같은 일이.
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>
이렇게 각 1.3 에서 싶다.
HTML:
<input ng-model="msg" ng-model-options="{debounce: 1000}">
컨트롤러:
$scope.$watch('variableName', function(nVal, oVal) {
if (nVal !== oVal) {
myDebouncedFunction();
}
});
<input type="text"
ng-model ="criteria.searchtext""
ng-model-options="{debounce: {'default': 1000, 'blur': 0}}"
class="form-control"
placeholder="Search" >
이제 시간과 함께 데버런스 ng 모델 옵션 설정되었습니다 변경할 필요가 있을 때, 그렇지 않으면 즉시 흐림의 모델 값을 저장할 경우 tfsnap 지연입니다 완료되지 않았습니다.
Html 에서 사용하는 사람들을 위한 키우프 / 케이다운 수정표시.
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);
};
});
<input type="search" autocomplete="off" ng-model="keywords" ng-keyup="search()" placeholder="Search...">
데보언스트 / 스로틀되었습니다 모델 업데이트는 앙굴라이스:
이 경우 다음과 같은 코드를 사용할 때보다 더 아무 것도 할 수 있는 이스피들 디렉티브을
<input
id="searchText"
type="search"
placeholder="live search..."
ng-model="searchText"
ng-ampere-debounce
/>
그 작은 코드 부분을 기본적으로 하나의 각도 디렉티브을 release. " 구성된 ng-ampere-debounce"; http://benalman.com/projects/jquery-throttle-debounce-plugin/ 활용할 수 있는 모든 첨부됩니다 dom element. 이 시기를 조절할 수 있도록 재배열합니다 디렉티브을 연결된 이벤트 핸들러도 스로틀이 이벤트.
Throttling/debouncing 쉽게 사용할 수 있습니다.
투명지에 여바바:
이 부분은 디렉티브을 적립율은 로랑주볼트 암페어 프레임워크 (https://github.com/lgersman/jquery.orangevolt-ampere).
있다고 믿지만 이 문제를 해결할 수 있는 최선의 방법을 사용하는 것이 벤 Alman& # 39 의 플러그인에는 jQuery 스로틀이 / 데버런스. 제 생각에는 모든 단일 필드에 이벤트 양식에 지연입니다 필요가 없습니다.
그냥 귀하의 $ $ $ 그데부너스 다음과 같은 기능을 제스쳐놀이처럼 취급료 내시경이요 랩
$scope.$watch("searchText", $.debounce(1000, function() {
console.log($scope.searchText);
}), true);
또 다른 방법은 추가하기에서는 지연입니다 기능을 모델 업데이트하십시오. 단순 디렉티브을 속임수 할 것으로 보인다.
app.directive('delayedModel', function() {
return {
scope: {
model: '=delayedModel'
},
link: function(scope, element, attrs) {
element.val(scope.model);
scope.$watch('model', function(newVal, oldVal) {
if (newVal !== oldVal) {
element.val(scope.model);
}
});
var timeout;
element.on('keyup paste search', function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
scope.model = element[0].value;
element.val(scope.model);
scope.$apply();
}, attrs.delay || 500);
});
}
};
});
사용법:
<input delayed-model="searchText" data-delay="500" id="searchText" type="search" placeholder="live search..." />
그래서 그냥 '대신' 과 '정의' 사용 '연기 모델 ng 모델 필요한 데이터 지연입니다'.
내가 이 문제를 해결할 수 있는 어떤 것이 진짜 ng 모델 디렉티브입니다 대성클리 않니다 바인딩해야 특별한 속성에 대한 어떤 난 후 나는 내 디렉티브을 업데이트하십시오 데버런스 사용하여 디렉티브을 있는 제스쳐놀이처럼 서비스 속성 때문에 사용자는 자신이 대신 변수를 감시하고 바인딩하지 데버런스 모델 ng 모델.
.directive('debounceDelay', function ($compile, $debounce) {
return {
replace: false,
scope: {
debounceModel: '='
},
link: function (scope, element, attr) {
var delay= attr.debounceDelay;
var applyFunc = function () {
scope.debounceModel = scope.model;
}
scope.model = scope.debounceModel;
scope.$watch('model', function(){
$debounce(applyFunc, delay);
});
attr.$set('ngModel', 'model');
element.removeAttr('debounce-delay'); // so the next $compile won't run it again!
$compile(element)(scope);
}
};
});
사용법:
<input type="text" debounce-delay="1000" debounce-model="search"></input>
또한 컨트롤러:
$scope.search = "";
$scope.$watch('search', function (newVal, oldVal) {
if(newVal === oldVal){
return;
}else{ //do something meaningful }
데버런스 달러 서비스 여기에서 찾을 수 있습니다. http://jsfiddle.net/Warspawn/6K7Kd/
왜 다들 사용하려는 제스쳐놀이처럼? 함수를 사용할 수도 있습니다.
var tempArticleSearchTerm;
$scope.lookupArticle = function (val) {
tempArticleSearchTerm = val;
$timeout(function () {
if (val == tempArticleSearchTerm) {
//function you want to execute after 250ms, if the value as changed
}
}, 250);
};