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:

   <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 中ng-repeat，ng-if等必须用于将出现在标记中的 HTML 元素。根据具体的用例，您可以尝试将元素指令与replace: true.

Answer 3

您也可以在两者ng-container中使用相同的内容。但还有一个额外的选择是 充当AngularjsAngular-2angular-2ng-templateng-container