2015-07-21 67 views
2

在控制器(editGirdController)我有一个范围变量(editGird),可以从模板按钮(真/假)进行切换:很多NG,如果情况变得很慢

我的模板呈现值或模板根据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); 
    } 

} 

]);

更好的解决方案?

enter image description here

enter image description here

回答

4

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

无论如何,你有3个嵌套ng重复!这真的会杀死你的表现,试着想一想,如果你能减少这一点。

+1

现在非常快,几乎瞬间.... ng-show像一个魅力。谢谢 –