ng-repeatを使用して大規模なデータセットを反復処理する角度のJSフリーズDOM

Question

現在、ボタンをクリックすると、$ httpリクエストを送信して情報を返すアプリケーションがあります。私はその後$scope変数rowsとcolumnsを上記のデータで更新します。 ng-repeatはすべてのデータをループします。

1000オブジェクトを超えるデータを増やすと、DOMが完全にロックされます。 DOMをロックしないようにコードを最適化するにはどうすればいいですか？これは、データが繰り返し処理されている間にユーザーがページ上で操作を行う必要があるため重要です。私は、10000行まで作業するための仮説的な解決策が必要です。ここで

私のHTML ...

<table> 
    <tr> 
     <th ng-repeat="column in columns | orderBy:columnToSortBy:reverse"> 
      <h6 ng-bind="column.name" ng-click='sortBy(column.name)'></h6> 
      <img src='/static/images/asc.gif' ng-show="orderByAsc"> 
      <img src='/static/images/desc.gif' ng-show="orderByDesc"> 
      <img src='/static/images/bg.gif' ng-show="orderByNothing"> 
     </th> 
    </tr> 
    <tr ng-repeat="row in rows"> 
     <td ng-repeat="(key, value) in row" ng-bind="value"></td> 
    </tr> 
</table> 

が付加されるHTMLが作成されているコントローラ、追加、および$compile「EDです...

mainQueryModule.controller("newQueryController", function($scope, $http, $compile){ 
var results = {columns:[{"type": "STRING", "name": "nk"}, {"type": "STRING", "name": "Bn"}, {"type": "STRING", "name": "Sk"},{"type": "STRING", "name": "ank"}, {"type": "STRING", "name": "Bnk"}, {"type": "STRING", "name": "Skk"}, {"type": "STRING", "name": "Name"}, {"type": "STRING", "name": "Phone"}, {"type": "STRING", "name": "Age"}, {"type": "STRING", "name": "Tank"}, {"type": "STRING", "name": "Bank"}, {"type": "STRING", "name": "Skunk"}], rows:[]}; 
for(index = 0; index < 1000; index++){ 
     results['rows'].push({nk: "select * from faker 100000000000", Bn: 35, Sk: 567, ank: "ank", Bnk: "Bnk", Skk: "Skk", Name: "Erik", Phone: 100000+index, Age: 29+index, Bank: "Big"+index, Tank: 16+index, Skunk: "123"+index}) 
} 

$scope.runQuery = (client_id) => { 
     // $http.post("fakeurl/", {test:123}).then(function(response){ 
     //  console.log(response) 
      $scope.columns = results["columns"]; 
      $scope.columnToSortBy = null; 
      $scope.rows = results["rows"]; 
      $scope.reverse = false; 
      $scope.orderByAsc = false; 
      $scope.orderByDesc = false; 
      $scope.orderByNothing = true; 
     // }) 
} 
}) 

---

@Gauravアドバイスに基づいて変更を反映するように更新された質問。

Answer 1

あなたは例：angularjs方法でその操作を行う必要があります。あなたのHTMLはこの

<table class='results'> 
    <tr class='results-column-tr'> 
    <th ng-repeat="column in columns"><h6 class='results-column-titles' ng-click='sortBy(column.name)">{{column.name}}</h6><img ng-show='orderByDesc' src='/static/images/asc.gif'><img ng-show='orderByAsc' src='/static/images/desc.gif'><img ng-show='orderByNothing' src='/static/images/bg.gif'> 
    </th> 
    </tr> 
    <tr ng-repeat='row in rows | orderBy:columnToSortBy:reverse'> 
    <td ng-repeat="column in columns" class='results-data' ng-bind='row[column.name]'> 
    </td> 
    </tr> 
</table> 

とコントローラ

mainQueryModule.controller("newQueryController", function($scope, $http){ 
    var results = {columns:[{"type": "STRING", "name": "nk"}, {"type": "STRING", "name": "Bn"}, {"type": "STRING", "name": "Sk"},{"type": "STRING", "name": "ank"}, {"type": "STRING", "name": "Bnk"}, {"type": "STRING", "name": "Skk"}, {"type": "STRING", "name": "Name"}, {"type": "STRING", "name": "Phone"}, {"type": "STRING", "name": "Age"}, {"type": "STRING", "name": "Tank"}, {"type": "STRING", "name": "Bank"}, {"type": "STRING", "name": "Skunk"}], rows:[]}; 
    for(index = 0; index < 1000; index++){ 
    results['rows'].push({nk: "select * fotm ;ldfg;lkjdopiusergknds;lkbjs;dlfkjoisdug;lkjsdfg;lkjsdfgl;kjsdfg;lkjsdfgl;iusoe[rtuoipejl;ksdjsdjgoupsdgoupieopiutwjsgoji;duiejlds;fgjsdjgdfgsjsdgsdfgjsdgkl", Bn: 35, Sk: 567, ank: "ank", Bnk: "Bnk", Skk: "Skk", Name: "Erik", Phone: 100000+index, Age: 29+index, Bank: "Big"+index, Tank: 16+index, Skunk: "123"+index}) 
    } 
    $scope.columns = results["columns"]; 
    $scope.rows = results["rows"]; 
}); 

ようにする必要がありますが、jQueryのスタイルでこれをしないでください。