AngularJSで複数のテーブルを使用すると、しばらくの間ブラウザがフリーズします

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事前

Answer 1

にしなさいhelp.Thanksそれを最適化するためにtables.How理由あなたがパフォーマンスの問題を持っているが、の実装に起因しているためにハングアップしますng-repeat。

ng-repeatは、反復処理中の配列内の各項目に新しい範囲を作成します。 Angularは親スコープと子スコープの間に2ウェイバインディングを作成するので、多くのウォッチを作成することになります（ほとんどの読み込み時間がかかる）。カスタムアコーディオンに「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：この問題に対処するための多くの方法があります。私は実装するのが最も簡単です。