AngularJS中的多個表格在ng-repeat中凍結了一段時間

Question

我需要在角度js的手風琴裏面放置多個表格。 我正在使用下面的代碼來做到這一點。

<uib-accordion close-others="oneAtATime"> 
    <uib-accordion-group ng-repeat="look_up in lookup"> 
    <uib-accordion-heading> 
    {{look_up.name}} - {{look_up.status}} <i ng-class="{'fa fa-spinner fa-spin':look_up.status=='Loading...','fa fa-check':look_up.status=='IN SYNC','fa fa-times':look_up.status=='NOT IN SYNC'}" aria-hidden="true"></i> 
     <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
    </uib-accordion-heading> 
    <label for="showOnlyFailed">Show only queries that failed?</label> 
    <input id="showOnlyFailed" type="checkbox" ng-model="filter.valueField5"/> 
    <table ng-table="table[$index]" class="table" show-filter="true"> 
     <tr ng-repeat="user in $data"> 
     <td title="'title1'" filter="{ valueField1: 'text'}" sortable="'valueField1'"> 
      {{user.valueField1}} 
     </td> 
     <td title="'title2'" filter="{ valueField2: 'text'}" sortable="'valueField2'"> 
      {{user.valueField2}} 
     </td> 
     <td title="'title3'" filter="{ valueField3: 'text'}" sortable="'valueField3'"> 
      {{user.valueField3}} 
     </td> 
     <td title="'title4'" filter="{ valueField4: 'text'}" sortable="'valueField4'"> 
      {{user.valueField4}} 
     </td> 
     <td title="'title5'" filter="{ valueField5: 'text'}" sortable="'valueField5'"> 
      {{user.valueField5}} 
     </td>    
     <td title="'title6'" filter="{ valueField6: 'text'}" sortable="'valueField6'"> 
      {{user.valueField6}} 
     </td> 
     <td title="'title7'" filter="{ valueField7: 'text'}" sortable="'valueField7'"> 
      {{user.valueField7}} 
     </td> 
     <td title="'title8'" filter="{ valueField8: 'text'}" sortable="'valueField8'"> 
      {{user.valueField8}} 
     </td> 
     <td title="'title9'" filter="{ valueField9: 'text'}" sortable="'valueField9'"> 
      {{user.valueField9}} 
     </td> 
     <td title="'title10'" filter="{ valueField10: 'text'}" sortable="'valueField10'"> 
      {{user.valueField10}} 
     </td> 
     <td title="'title11'" filter="{ valueField11: 'text'}" sortable="'valueField11'"> 
      {{user.valueField11}} 
     </td> 
     </tr> 
    </table>  
    </uib-accordion-group>  
</uib-accordion> 

瀏覽器掛起了一段時間加載tables.There前大約14 tables.How優化它。請help.Thanks提前

Answer 1

你有性能問題的原因是由於實施ng-repeat。

ng-repeat爲您正在迭代的數組內的每個項目創建一個新的作用域。由於Angular會在父級和子級範圍之間創建2way綁定，因此最終會創建大量的手錶（這會佔用大部分加載時間）。

如果你改變「UIB-手風琴」到自定義手風琴，你能延遲加載每個表：

<div ng-repeat="look_up in lookup"> 
    <div class="title" 
     ng-click="itemSelected = $index;"> 

     {{look_up.name}} - {{look_up.status}} 
    </div> 
    <div ng-if="itemSelected == $index"> 
     <table> 
      <tr ng-repeat=""> ... </tr> 
     </table> 
    </div> 
</div> 

PS：有很多的方式來處理這個問題。我選擇最簡單的實現。