У меня есть проблемы с производительностью, я могу'т, кажется, адрес. У меня мгновенный поиск но это'ы немного лагает, так как он начинает поиск на каждого клавиша вверх()`.
ДШ:
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-данных это'т даже, что большие, 300КБ только, я думаю, что мне нужно сделать-это положить задержкой ~1 сек на поиск, чтобы ждать, пока пользователь завершит ввод, вместо выполнения действий на каждое нажатие клавиши. В AngularJS делает это внутренне, и после прочтения Docs и другие темы здесь, я не мог'т найти конкретный ответ.
Я бы признателен за любые указатели, как я могу задержать мгновенный поиск.
Обновление
Теперь это'ы проще, чем когда-либо (угловые 1.3), просто добавить опцию дребезга на модели.
в <тип входного=то"текст" и=и quot НГ-модель;searchStr" с НГ-модель-параметры=" и{дребезга: 1000}" и>
Обновленный plunker: 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>
Обязательное plunker: http://plnkr.co/dAPmwf
(См. ответ ниже на угловой 1.3 решения.)
Проблема здесь заключается в том, что поиск будет выполняться каждый раз при изменении модели, каждая клавиша вверх действии на входе.
Было бы чище способов сделать это, но, вероятно, самым простым способом будет переключение привязки так, что у вас есть $объем имущества, установленного внутри вашего контроллера, на котором работает фильтр. Таким образом, вы можете контролировать, как часто, что переменная $объем обновляется. Что-то вроде этого:
ДШ:
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();
}
});
В общем, вы'вновь говорю угловые запустить myDebouncedFunction()
, когда область действия переменной в сообщение
изменения. Атрибут НГ-модель-параметры=" и{дребезга: 1000}, что"уверен, что
сообщение` может обновлять только раз в секунду.
<input type="text"
ng-model ="criteria.searchtext""
ng-model-options="{debounce: {'default': 1000, 'blur': 0}}"
class="form-control"
placeholder="Search" >
Теперь мы можем установить НГ-модель-параметры задержки с течением времени и когда размытие, модель нужно будет сразу менять, в противном случае при сохранении будет иметь более старое значение, если задержка не завершен.
Для тех, кто использует клавиша вверх/вниз в HTML-разметке. Это не't использует часы.
Яш
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...">
Как ввели в угловых 1.3` вы можете использовать НГ-Модель-Параметры]1 атрибут:
<input
id="searchText"
type="search"
placeholder="live search..."
ng-model="searchText"
ng-model-options="{ debounce: 250 }"
/>
Debounced / обновления модели душится для AngularJS :
В вашем случае нет ничего больше, чтобы сделать чем с помощью директивы в код jsfiddle такой:
<input
id="searchText"
type="search"
placeholder="live search..."
ng-model="searchText"
ng-ampere-debounce
/>
Его в основном небольшой фрагмент кода, состоящий из одного углового директива по кличке "НГ-ампер-дребезга" с использованием http://benalman.com/projects/jquery-throttle-debounce-plugin/ который может быть присоединен к любому элементу DOM. Директива изменяет порядок, прикрепленные обработчики событий, так что он может контролировать, когда дроссель событий.
Вы можете использовать его для регулирования/debouncing
Взгляните :
Директива станет частью системы Orangevolt Ампера (https://github.com/lgersman/jquery.orangevolt-ampere).
Я считаю, что лучший способ решить эту проблему является использование Бен Алман's плагинов jQuery и газ / дребезга. На мой взгляд нет необходимости затягивать события каждого поля в вашей форме.
Просто оберните ваши $объем.$смотреть функцию обработки в $.дребезга вроде этого:
$scope.$watch("searchText", $.debounce(1000, function() {
console.log($scope.searchText);
}), true);
Другим решением является добавление функции delay, чтобы обновить модель. Простая директива, кажется, сделать трюк:
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..." />
Так что вы просто использовать `задержки-модель "вместо" НГ-модель и определить данные-задержка нужные``.
Я думаю, самый простой способ здесь, чтобы загрузить JSON или один раз загрузить его на$грязно
, а затем в фильтр поиска будет заботиться об остальном. Это'МР сэкономит вам лишние HTTP-запросы и его гораздо быстрее с уже загруженными данными. Памяти будет больно, но это того стоит.
Я решил эту проблему с директивой, что в основном это связывают реальные НГ-модель на специальный атрибут, который я смотреть в инструкции, затем с помощью дребезга сервис обновить директиву атрибута, поэтому пользователю смотреть на переменную, которая его привязать к дребезга-модель вместо НГ-модель.
.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 }
Демо на jsfiddle:
сервис $дребезга можно найти здесь: http://jsfiddle.net/Warspawn/6K7Kd/
Вдохновленный директива eventuallyBind http://jsfiddle.net/fctZH/12/
Угловые 1.3 будет НГ-модель-параметры дребезга, но до тех пор, вам придется использовать таймер, как Жосуэ Ибарра сказал. Однако, в его код, он запускает таймер на каждое нажатие клавиши. Кроме того, он с помощью setTimeout, когда в угловой нужно использовать $тайм-аут или использовать $применить в конце для setTimeout.
Почему все хотят использовать часы? Также можно использовать функцию:
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);
};