AngularJS：添加/銷燬明細表行

我有一個Angular 1.4.12應用程序，其中嵌套的ng-repeat創建的表格顯示一組數據。AngularJS：添加/銷燬明細表行

<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解決方案有點遺憾。

來源

2016-07-28 Steve

你嘗試過什麼？首先，你需要一個服務客戶端來檢索給定ID的細節，然後其他所有事情都將成爲接口工作。你堅持哪一個？ –

使用ng-if決定哪些行不要摘要 – bresleveloper

使用ng-if。

ngIf指令根據{expression}刪除或重新創建一部分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

來源

2016-07-28 14:00:50 CozyAzure

這是比uib-collapse方法更好的解決方案。但是，對於1000行，加載性能仍然太慢。時間軸中的腳本部分，即使是本地數據也超過5秒鐘。 – Steve

我明白了。現在，'ng-if'是最接近的解決方案，您可以隨時創建和銷燬DOM元素。太糟糕了，它仍然對你來說是滯後的（也許你應該轉向ng2，他們聲稱它至少快了4倍：D無論如何，瀏覽器上觀察者的總體最佳數量約爲2k，可能你可以看看其他地方的代碼，看看你是否可以進一步優化它？ – CozyAzure

AngularJS：添加/銷燬明細表行

回答

相關問題