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的元素指令。