相当于Angular ng容器的AngularJS [英] AngularJS equivalent for Angular ng-container

问题描述

这里是Angular ng-container 的AngularJS等效项吗?

Is here an AngularJS equivalent for Angular ng-container?

还是我应该使用transclude指令自己创建一些东西?

Or should I create something myself with a transclude directive?

用例示例:

1. 带有隔行对，三元组等单元格的表:

1. Tables with interlaced pairs, triples etc. of cells:

<table><tr>
  <ng-container ng-repeat="item in items">
    <td>{{ item.a }}</td>
    <td>{{ item.b }}</td>
  </ng-container>
</tr></table>

DOM树中不应有其他级别，而<td>应该是<tr>元素的直接子代.

There should not be additional level in the DOM tree, and instead <td>s should be direct children of <tr> element.

HTML列表也存在类似的问题，尤其是定义列表，其中<dt>/<dd>元素应为<dl>的直接子代，而它们通常成对存在.

There is similar problem with HTML lists, especially the definiton list where <dt> / <dd> elements should be direct children of <dl> while they usually exist in pairs.

具有display:grid的表形式数据排列:

Table-like arrangement of data with display:grid:

<div style="display: grid; grid-template-columns: auto auto">
    <ng-container ng-repeat="item in items">
        <div>{{ item.a }}</div>
        <div>{{ item.b }}</div>
    </ng-container>
</div>

这种情况甚至更具问题，因为DOM树中存在的容器元素会导致整个布局崩溃，因为它是作为单元而不是其子级呈现的.

This case is even more problematic as the container element existing in DOM tree causes the whole layout to break, as it is rendered as the cell instead of its children.

推荐答案

在您提到的情况下，可以分别使用ng-repeat-start和ng-repeat-end对:

In cases you have mentioned, you can use ng-repeat-start and ng-repeat-end pair, respectively:

1. 具有隔行隔行，三元组等单元格的表:

1. Tables with interlaced pairs, triples etc. of cells:

<table><tr>
  <td ng-repeat-start="item in items">{{ item.a }}</td>
  <td ng-repeat-end>{{ item.b }}</td>
</tr></table>

HTML列表:

HTML lists:

<dl>
  <dt ng-repeat-start="item in items">{{ item.term }}</dt>
  <dd ng-repeat-end>{{ item.definition }}</dd>
</dl>

具有display:grid的表状数据排列:

Table-like arrangement of data with display:grid:

<div style="display: grid; grid-template-columns: auto auto">
  <div ng-repeat-start="item in items">{{ item.a }}</div>
  <div>{{ item.b }}</div>
  <div ng-repeat-end>{{ item.c }}</div>
</div>

您可以在API参考中阅读以下内容:

You can read about this in API reference: https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points

这篇关于相当于Angular ng容器的AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！