许多ng-if条件变得非常慢

Question

在controller（editGirdController）中我有一个范围变量（editGird），可以从模板按钮切换（true / false）：

我的模板根据editGird变量为true或false，呈现值或模板以编辑值（在每个表格单元格中）。

在25-35列的表格中，值之间的swop或编辑模板很慢。每5行查询约1秒。

<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);
  }

}

]）;

更好的解决方案？

Answer 1

尝试使用ng-show代替。您将在DOM中获得更多元素，但是当您打开/关闭编辑时它们就会准备就绪。

无论如何，你有3个嵌套的ng-repeat！它真的会扼杀你的表现，试着想一想你是否能减少它。