AngularJS ng-repeat性能改进

时间:2017-08-28 17:38:56

标签: html angularjs angularjs-ng-repeat

我创建了一个运行MySQL查询的报告应用程序,并将数据(30k行)返回给Angular JS。如果我限制行数,则数据会快速加载到HTML表中,但是当要显示30k行时,数据会挂起。

HTML代码段 -

<tbody class="tbody-class">
           <tr ng-repeat="patching in main_data_table.message | filter: (!disableFilter || '') && {uaid: searchText}" ng-if="searchText.indexOf(',')==-1">
                <td class="table-row-text">{{ patching.server_name}}</td>
                <td class="table-row-text">{{ patching.uaid}}</td>
                <td class="table-row-text">{{ patching.environment}}</td>
                <td class="table-row-text">{{ patching.is_disruptive}}</td>
                <td class="table-row-text">{{ patching.is_disruptive}}</td>
                <td class="table-row-text">{{ patching.tz_name}}</td>
                <td class="table-row-text">{{ patching.start_time}}</td>
                <td class="table-row-text">{{ patching.end_time}}</td>
                <td class="table-row-text">{{ patching.validator_group}}</td>
                <td class="table-row-text">{{ patching.patching_group}}</td>
                <td class="table-row-text">{{ patching.patching_criteria}}</td>
                <td class="table-row-text">{{ patching.patching_documentation_link}}</td>
            </tr>

控制器代码段 -

patchingApp.controller('patchingController', function ($scope, $state, patchingServices, $timeout) {
'use strict';

   $scope.searchText   = '';
   $scope.main_data_table = patchingServices.getPatchingReport().get();

   function getDownloadName(){
       var d =  new Date();
       var date = d.getDate() + "" + (d.getMonth() + 1) + "" + 
                  d.getFullYear();
       var fileName = "patching_" + date + ".csv";  
       return fileName;
   }

   function setDownloadAttribute() {
       var a = document.getElementById("fileLink");
       a.setAttribute("download", getDownloadName())
   }

   var a = document.getElementById("fileLink");
   a.onclick = setDownloadAttribute;

  });


patchingApp.filter('fill', function() {
       return function(input,val) {
           if(val!=''){
              var out=[];
              var filterVal = val.split(",");
            if (filterVal.length > 1) {
                for (var i = 0; i < filterVal.length; i++) {
                    for(var j=0;j<input.length;j++){
                        if (input[j].uaid == filterVal[i]) {
                            console.log("filter:"+filterVal[i]);
                            out.push(input[j]);
                            console.log("uaid"+input[j].uaid);
                        }
                    }
                }
                console.log(out);
                return out;                   
  }}}});

0 个答案:

没有答案