検索中のデータ全体の読み込みを避ける方法

Question

大きいデータを検索するには、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つ以上の文字を入力し、入力のデフォルトのボタンを使用してすべてを削除すると、全体のデータがページに読み込まれ、それは大きな遅延を引き起こします。それに対処する方法？

Answer 1

あなたは以下を追加することができます。

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=""; 
      }); 
     } 

味方も：2

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

PS：if($scope.search.length < 4)は本当に意味がないためか3つの文字がある場合 - これを避けるために

Answer 2

aw04 @によって逃れようの文が満足であるかどう遅延の場合はレンダリングしているデータを制限する必要があります。これには角度フィルタlimitToを使用できます。 limitToにデフォルト値をロードする任意の値を設定します。