AngularJS等效于Angular ng-container

Question

这是一个AngularJS等效的Angular ng-container ？

或者我应该用transclude指令自己创建一些东西？

---

用例示例：

1. 具有隔行对，三元组等的表格：

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

   DOM树中不应该有额外的级别，而<td> s应该是<tr>元素的直接子级。

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

3. 具有display:grid的数据表格式排列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树中存在的容器元素导致整个布局中断，因为它被渲染为单元而不是其子元素。

Answer 1

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

1. 具有隔行对，三元组等的表格：

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

2. HTML列表：

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

3. 具有显示的数据表格式排列：网格：

    <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参考中阅读此内容： https ： //docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points

Answer 2

您也可以在Angularjs和Angular-2使用相同的ng-container 。 但是在angular-2有一个额外的选项是ng-template ，它充当了ng-container

Answer 3

不幸的是，在AngularJS ng-repeat ，必须在标记中出现的HTML元素上使用ng-if等。 根据确切的用例，您可以尝试使用带有replace: true的元素指令。