2015-07-21 56 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像一個魅力。謝謝 –