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

Answer 1

假设您在ng-repeat中有每个顶级记录，则应为其容器的子数据添加ng-if装饰，以防止dom渲染过多的html元素。这意味着您将需要实现UI来扩展有问题的行（即ng-if="{{currentItem.expanded}}" ng-click={{currentItem.expanded == !currentItem.expanded}}）。

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

以上两个建议都将在模板中实现。它将帮助其他人，如果您提供它，我将进行故障排除。

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

1 个答案: