AngularJS：添加/销毁明细表行

Question

我有一个 Angular 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 的“折叠”指令来隐藏和显示详细信息行。

您可以在这支 Pen 中看到全部内容：https://codepen.io/smlombardi/pen/kXpqPJ?editors=1010

当记录集有大量数据时，这种方法的问题就很明显了；比如1000行的json数据。尽管使用了单向绑定，但性能太慢了。

我宁愿做的是不完全不包含详细信息行，然后在单击披露图标时，动态创建行和根据父行 ID 获取其数据。当披露图标关闭时，销毁详细信息行。

我用 jQuery 做过类似的事情，但我对如何使用 Angular 有点迷茫。

Answer 1

使用 ng-if。

ngIf 指令根据 {expression} 删除或重新创建 DOM 树的一部分。如果分配给 ngIf 的表达式的计算结果为 false 值，则从 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