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：添加/销毁明细表行

回答

相关问题