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

【问题标题】：Many ng-if conditions become very slow许多 ng-if 条件变得非常缓慢
【发布时间】：2015-07-21 11:14:19
【问题描述】：

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

我的模板根据editGird变量的真假呈现值或模板来编辑值（在每个表格单元格中）。

在具有 25-35 列的表上，值或编辑模板之间的切换很慢。每 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>

控制器：

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

}

]);

更好的解决方案？

【问题讨论】：

标签： angularjs angular-ng-if

【解决方案1】：

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

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

【讨论】：