страница занимает больше времени для загрузки и отображения записей таблицы

Question

Я создал отображение таблицы, используя angularjs в codeigniter. Я упомянул ниже, что я использую для отображения записей этой таблицы. В этой таблице будет 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 - оптимизация загрузки страницы

 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-элементов.Это означает, что вам потребуется реализовать пользовательский интерфейс для расширения рассматриваемой строки (т. Е. ng-if="{{currentItem.expanded}}" ng-click={{currentItem.expanded == !currentItem.expanded}}).

Если вы связываете свойства в этих дочерних объектах, вы также можете захотеть изучить одностороннюю привязку, в которой выдобавьте в префикс двойные двоеточия {{::modelBeingOneWayBound}}.Это предотвратит создание большого набора данных из тонны наблюдателей, что может снизить производительность.

Оба приведенных выше предложения будут реализованы в шаблоне.Это поможет другим, и я устраню неполадки, если вы предоставите это.