Many ng-if conditions become very slow

Question

In controller(editGirdController) I have a scope variable(editGird) that can be toggled from template button(true/false):

My template renders the value or the template to edit the value(in each table cell) according to the editGird variable being true or false.

On tables with 25-35 columns the swop between values or edit tamplate is slow. About 1 sec for every 5 rows of query.

<div class="table-responsive" style="width:100%;" ng-controller="editGirdController" >
          <div class="sortMenu">
            <a href="" ng-click="onOff();">
              <div class="sortMenBtn" ng-style="{'color':editGirdColor}"> <span class="glyphicon glyphicon-edit"></span> Edit in place
              </div>
            </a>
          </div>
          <table class="superResponsive" style="margin:0 auto;">


              <thead>
              <!-- <thead tasty-thead bind-not-sort-by="notSortBy"></thead> -->
              <tr>
                <th ng-repeat="attobj in rows[0].class_attributes()">
                  {{ attobj.label }}
                </th>
              </tr>
              <tr>
                <td  ng-repeat="attobj in header.columns track by $index">
                  <input ng-if="attobj.filterable" type="text" class="form-control input-sm" ng-model="filterBy[attobj.filterkey || attobj.key]" ng-model-options="{ debounce: 2000 }" />
                </td>
              </tr>
              </thead>
              <tbody>

              <tr ng-repeat="dbo in rows">


              <td ng-if="editGird==false"  ng-repeat="attobj in header.columns" ng-dblclick="ttt=!ttt">

                <div>
                  <form name="theForm" novalidate>
                  <div ng-if="ttt" ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">

                  </div>
                  </form>
                  <div ng-if="!ttt" ng-repeat="v in dbo.get4(attobj.key) track by $index">
                    <p ng-if="v.cid">{{ v.displayName() }}</p>
                    <p ng-if="!v.cid">{{ v }}</p>
                  </div>
                </div>

              </td>


              <td ng-if="editGird==true" ng-repeat="attobj in header.columns">

                <div>
                  <form name="theForm" novalidate>
                  <div ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">

                  </div>
                  </form>
                </div>

              </td>


              </tr>

            </tbody>
          </table>

</div>

Contrller:

app.controller('editGirdController', ['$scope',
function ($scope) {     

  $scope.editGird= false;
  $scope.onOff = function() {
      if ($scope.editGird == true){
        $scope.editGird = false;
        $scope.editGirdColor ='#0887A7';
      } else{
        $scope.editGird = true;
        $scope.editGirdColor ='lightGreen';
      }
  console.log($scope.editGird); 
  console.log($scope);
  }

}

]);

Better solution?

Answer 1

Try to use ng-show instead. You will get more elements in the DOM, but they will be ready when you switch on/off editing.

Anyway, you have 3 nested ng-repeat! It's really killing your performance, try to think if you can reduce that.