AngularJS: add/destroy detail table row
<p>I have an Angular 1.4.12 app, with a table created with nested <code>ng-repeat</code> showing a set of data.  </p>

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

<p>Each row has a disclosure icon to show an additional row that contains details.</p>

<p>In the past, we have loaded all the data and used Angular UI Bootstrap's "collapse" directive to hide and show the detail rows.</p>

<p>You can see the entire thing in this Pen: <a href="https://codepen.io/smlombardi/pen/kXpqPJ?editors=1010" rel="nofollow">https://codepen.io/smlombardi/pen/kXpqPJ?editors=1010</a></p>

<p>The problem with this approach has become apparent when the recordset has a lot of data; such as 1000 rows of json data.  Despite using one-way binding, the performance is too slow.</p>

<p>What I'd rather do is to <strong>not</strong> have the detail rows included at all, and then when the disclosure icon is clicked, <em>create the row on the fly</em> and fetch its data based on the parent row ID.  When the disclosure icon is closed, destroy the detail row.</p>

<p>I have done things like this with jQuery, but I'm a bit lost on how to approach with Angular.</p>