AngularJS：詳細表の行を追加/破棄

Question

私は角度1.4.12のアプリケーションを持っています。入れ子にしてテーブルを作成し、ng-repeatのデータを表示します。

<tr ng-repeat-start="item in pmt.table.data"> 
    ...main data... 
</tr> 
<tr class="table-details" ng-repeat-end="item in pmt.table.data"> 
    <td colspan="15"> 
     <div uib-collapse="!item.showDetails"> 
     <div class="table-details-content">hello world</div> 
     </div> 
    </td> 
</tr> 

各行には詳細を含む追加の行を表示するための公開アイコンがあります。

これまで、すべてのデータを読み込み、Angular UI Bootstrapの "collapse"指示文を使用して、詳細行を非表示にして表示しました。

あなたはこのペンで全体の事を見ることができます：レコードセットは、大量のデータを持っている場合https://codepen.io/smlombardi/pen/kXpqPJ?editors=1010

このアプローチの問題が明らかになりました。例えば1000行のjsonデータなどである。片方向バインディングを使用しているにもかかわらず、パフォーマンスは低すぎます。

私はむしろやるだろうがにないではその場上の行を作成し、親行のIDに基づいて、そのデータをフェッチ、開示アイコンをクリックしたときに詳細行がまったく含まれていて、 。公開アイコンが閉じられたら、詳細行を破棄します。

私はjQueryでこのようなことをしましたが、Angularでアプローチする方法が少し分かりません。

Answer 1

ng-ifを使用します。

ngIf指令は、{式}に基づいて、DOMツリーの部分を除去または再作成。 ngIfに割り当てられた式が偽の値に評価された場合、要素はDOMから削除されます。そうでない場合、要素のクローンがDOMに再挿入されます。 ng-ifは完全に作成（破壊）することを

注新しいスコープ - 何をしたいですが、もう一度、データバインディングを必要としなければならない、あなたのスコープの継承に特別な注意を払うようにしたいと思います。

 <td colspan="15"> 
     <!--Change uib-collapse to ng-if--> 
     <div ng-if="item.showDetails"> 
      <div class="table-details-content">hello world</div> 
     </div> 
     </td> 

の作業Codepen