页面需要更多时间来加载和显示表格记录

Question

我已经通过在 codeigniter 中使用 angularjs 创建了表格显示。我在下面提到了我用于显示该表格记录的表格。该表格将有 200 条记录，每条记录将有 100 条记录。所以这段代码需要很多时间加载页面。

var chseble_app = angular.module('chseble_app', []);
chseble_app.controller('chsebale_ctlr', function($scope){
$scope.bale_list= <?= json_encode($bale_list); ?>;
$scope.total_wght = function(){
  var total_wght = 0;
  angular.forEach($scope.bale_list, function(lot){
    total_wght += parseFloat(lot.weight);    
  });
  return total_wght;
};
$scope.selected_lots = [];
$scope.selected_total = 0;
$scope.chk_lot = [];
$scope.chk_bale = [];
$scope.chk_all = false;
//checkbox checked function of lot row
$scope.lot_chkd = function(id){

    angular.forEach($scope.bale_list, function(lot){
      if(lot.id == id)
      {
        if(!$scope.chk_lot[id])
        {
          angular.forEach(lot.bales, function(bale){
            $scope.chk_bale[bale.id] = false;
          });
       }
      else
      {
          angular.forEach(lot.bales, function(bale){
            $scope.chk_bale[bale.id] = true;
          });
      }
      }
    });
  $scope.check_loop();      
}

//打捆排复选框勾选功能

$scope.bale_chkd = function(bleid, lotid){
  $scope.check_loop();
}

//check/uncheck all checkboxes when select all check box is checked
$scope.check_all = function(){
  $scope.selected_total = 0;
  $scope.selected_lots = [];
  if($scope.chk_all)
  {
    angular.forEach($scope.bale_list, function(lot){
        $scope.selected_total += parseFloat(lot.weight);
        $scope.chk_lot[lot.id] = true;
        $scope.selected_lots.push(' '+lot.lot_no);
        angular.forEach(lot.bales, function(bale){$scope.chk_bale[bale.id] = true;});
    });
  }
  else
  {
    angular.forEach($scope.bale_list, function(lot){
        $scope.chk_lot[lot.id] = false;
        angular.forEach(lot.bales, function(bale){$scope.chk_bale[bale.id] = false;});
    });
  }
}

//calculate total and check or uncheck parent checkbox
$scope.check_loop = function(){
  $scope.selected_total = 0;
  $scope.selected_lots = [];
  var all_lot_chkd = true;
  angular.forEach($scope.bale_list, function(lot){
     var bale_chkd = false;
      angular.forEach(lot.bales, function(bale){
          if($scope.chk_bale[bale.id])
          {
            $scope.selected_total += parseFloat(bale.weight);
            $scope.chk_lot[lot.id] = true;
            bale_chkd = true;
          }
          else
          {
            all_lot_chkd = false;
          }
      });
    if(bale_chkd == false)
      $scope.chk_lot[lot.id] = false;
    else
      $scope.selected_lots.push(' '+lot.lot_no);
  });
      $scope.chk_all = all_lot_chkd;
}

});

我已经尝试通过以下参考方法在页面加载完成后使用 settimeout 方法加载数据，但无法使用该方法代码编辑我的代码。是否可以像该参考演示那样更改我的代码，或者有任何其他方式加载更快的页面？

JSFiddle - Page load optimization

 Array
    (
        [561] => stdClass Object
            (
                [id] => 561
                [lot_no] => 1
                [weight] => 16230
                [staple] => 3600
                [mic] => 0
                [strength] => 0
                [trash] => 0
                [color_grade] => 0
                [bales] => Array
                    (
                        [0] => stdClass Object
                            (
                                [id] => 62941
                                [process_id] => 561
                                [press_no] => 1
                                [weight] => 162
                                [staple] => 36
                                [mic] => 0
                                [strength] => 0
                                [trash] => 0
                                [color_grade] => 0
                            )

                        [1] => stdClass Object
                            (
                                [id] => 62942
                                [process_id] => 561
                                [press_no] => 2
                                [weight] => 151
                                [staple] => 36
                                [mic] => 0
                                [strength] => 0
                                [trash] => 0
                                [color_grade] => 0
                            )
)
[562] => stdClass Object
        (
            [id] => 562
            [lot_no] => 2
            [weight] => 15523
            [staple] => 3600
            [mic] => 0
            [strength] => 0
            [trash] => 0
            [color_grade] => 0
            [bales] => Array
                (
                    [0] => stdClass Object
                        (
                            [id] => 63041
                            [process_id] => 562
                            [press_no] => 1
                            [weight] => 156
                            [staple] => 36
                            [mic] => 0
                            [strength] => 0
                            [trash] => 0
                            [color_grade] => 0
                        )

                    [1] => stdClass Object
                        (
                            [id] => 63042
                            [process_id] => 562
                            [press_no] => 2
                            [weight] => 148
                            [staple] => 36
                            [mic] => 0
                            [strength] => 0
                            [trash] => 0
                            [color_grade] => 0
                        )
)

Answer 1

假设您在 ng-repeat 中拥有每条顶级记录，您应该为其子数据的容器使用 ng-if 进行装饰，以防止 dom 呈现过多的 html 元素。这意味着您需要实现 UI 以扩展相关行（即ng-if="{{currentItem.expanded}}" ng-click={{currentItem.expanded == !currentItem.expanded}}）。

如果您要在这些子对象中绑定属性，您可能还想研究单向绑定，在这种绑定中，您的绑定前加上双冒号 {{::modelBeingOneWayBound}}。这可以防止您的大型数据集产生大量可能影响性能的观察者。

以上两个建议都将在模板中实现。如果您提供它，它将帮助其他人，我会解决问题。