Как избежать загрузки целых данных при поиске в Angular

Question

Как избежать загрузки целых данных при поиске в Angular

0

Я просматриваю большие данные, используя AngularJS только когда я печатаю> 3 символа ввода.

var app = angular.module('test_table', []);
app.controller('main_control',function($scope, $http){
    $scope.inputChange = function(){
        if($scope.search.length > 3){
            $http.get("http://localhost:7001/load").success(function(data){
                $scope.loaded=data; 
            });
        }
        if($scope.search.length < 4){
            $http.get("http://localhost:7001/load").success(function(data){
                $scope.loaded=""; 
            });
        }
    }       
});

Код HTML:

<input type="search" class="inputsearchform" ng-model="search" ng-change="inputChange()"/>
...
<tr class="rowR" ng-repeat="data in loaded | filter:{song_name: search}">

У меня есть проблема. Когда я печатаю более 3 символов, а затем удаляю все, используя кнопку ввода по умолчанию, все данные загружаются на страницу, и это вызывает большую задержку. Как с этим бороться?

Lev S 25 март 2016, в 14:52

Источник

Теги:

javascript

html

angularjs

2 ответа

1

Чтобы избежать задержки, вам придется ограничить данные, которые вы limitTo. Для этого вы можете использовать limitTo углового фильтра. Установите limitTo для любого значения, которое вы хотите загрузить по умолчанию.

ashfaq.p 25 март 2016, в 11:02

0

если вы пытаетесь ограничить данные по соображениям производительности, было бы более разумно ограничить их на сервере
aw04 25 март 2016, в 13:31
0

@ aw04 что ты имеешь в виду под этим? Потому что я хочу повысить производительность. Что вы можете посоветовать для этого?
Lev S 25 март 2016, в 13:37
0

@LevS Итак, этот ответ говорит об ограничении данных, что означает, что вам нужно добавить подкачку страниц или какую-то дополнительную загрузку. Моя точка зрения заключалась в том, что выполнение этого в угловом режиме не очень помогло бы, потому что вы все еще загружаете все данные с сервера, что, вероятно, занимает гораздо больше времени, чем рендеринг.
aw04 25 март 2016, в 13:40
0

@LevS Сказав, что, если вы встраиваете что-то в свой сервер, чтобы захватывать только x записей одновременно (опять же, подкачку или больше), это потенциально может значительно повысить производительность
aw04 25 март 2016, в 13:41
0

@ aw04 Теперь я загружаю только целые данные с сервера, а затем ищу их с помощью angular. Таким образом, производительность не так хороша, как может быть. Что вы имеете в виду? Чтобы загрузить какую-то часть с сервера, т.е. 1/10, чем искать, показать результаты на странице / страницах, а затем снова загрузить вторую часть и повторить. Я прав?
Lev S 25 март 2016, в 13:53
1

@LevS Более или менее, да. Вы можете исследовать пейджинг на стороне сервера и посмотреть, подходит ли он для того, что вы делаете. Я бы рекомендовал это, только если ваша проблема с производительностью связана с объемом данных, поступающих с сервера.
aw04 25 март 2016, в 13:57
0

@ aw04 Спасибо за объяснение!
Lev S 25 март 2016, в 14:00

Показать ещё 5 комментариев

Ещё вопросы

если вы пытаетесь ограничить данные по соображениям производительности, было бы более разумно ограничить их на сервере
@ aw04 что ты имеешь в виду под этим? Потому что я хочу повысить производительность. Что вы можете посоветовать для этого?
@LevS Итак, этот ответ говорит об ограничении данных, что означает, что вам нужно добавить подкачку страниц или какую-то дополнительную загрузку. Моя точка зрения заключалась в том, что выполнение этого в угловом режиме не очень помогло бы, потому что вы все еще загружаете все данные с сервера, что, вероятно, занимает гораздо больше времени, чем рендеринг.
@LevS Сказав, что, если вы встраиваете что-то в свой сервер, чтобы захватывать только x записей одновременно (опять же, подкачку или больше), это потенциально может значительно повысить производительность
@ aw04 Теперь я загружаю только целые данные с сервера, а затем ищу их с помощью angular. Таким образом, производительность не так хороша, как может быть. Что вы имеете в виду? Чтобы загрузить какую-то часть с сервера, т.е. 1/10, чем искать, показать результаты на странице / страницах, а затем снова загрузить вторую часть и повторить. Я прав?
@LevS Более или менее, да. Вы можете исследовать пейджинг на стороне сервера и посмотреть, подходит ли он для того, что вы делаете. Я бы рекомендовал это, только если ваша проблема с производительностью связана с объемом данных, поступающих с сервера.

ltalhouarne · Accepted Answer · 2016-03-25T10-29-00.000Z

Вы можете добавить следующее:

if($scope.search.length == 0){
      $scope.loaded=""; 
}

или создать функцию, вызванную кнопкой удаления:

$scope.delete = function(){ 
      $scope.loaded=""; 
}

PS: вы не должны вызывать службу, если вы собираетесь назначить пустую переменную:

        if($scope.search.length < 4){
            $http.get("http://localhost:7001/load").success(function(data){
                $scope.loaded=""; 
            });
        }

должно быть действительно:

        if($scope.search.length < 4){
                $scope.loaded=""; 
        }

PS 2: if($scope.search.length < 4) самом деле не имеет смысла либо потому, что если есть 3 символа - это утверждение if будет удовлетворено, так как ускорено @aw04

Есть ли причина не просто удалять http-вызов на <4, а не создавать другое условие? Я не вижу смысла в этом