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的“collapse”指令来隐藏和显示细节行。

您可以在此笔中看到整个内容：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

AngularJS：添加/销毁详细信息表行

1 个答案: