AngularJS 等效于 Angular ng-container [英] AngularJS equivalent for Angular ng-container

问题描述

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

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

<小时>

示例用例:

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

   <ng-container ng-repeat="item in items"><td>{{ item.a }}</td><td>{{ item.b }}</td></ng-容器></tr></table>
   DOM 树中不应该有额外的层级，而 
    元素的直接子元素.
   HTML 列表也有类似的问题，尤其是定义列表，其中 
   /
    元素应该是 
    而它们通常成对存在.
   使用display:grid:
   类似表格的数据排列
   <ng-container ng-repeat="item in items"><div>{{ item.a }}</div><div>{{ item.b }}</div></ng-容器>
   这种情况更成问题，因为 DOM 树中存在的容器元素会导致整个布局中断，因为它被渲染为单元格而不是其子元素.
   解决方案
   在你提到的情况下，你可以使用 ng-repeat-start 和 ng-repeat-end 对，分别:
   具有隔行对、三元组等单元格的表格:
   s 应该是 
   <td ng-repeat-start="item in items">{{ item.a }}</td><td ng-repeat-end>{{ item.b }}</td></tr></table>
   HTML 列表:
   <dt ng-repeat-start="item in items">{{ item.term }}</dt><dd ng-repeat-end>{{ item.definition }}</dd></dl>
   使用 display:grid 以表格形式排列数据:
   <div ng-repeat-start="item in items">{{ item.a }}</div><div>{{ item.b }}</div><div ng-repeat-end>{{ item.c }}</div>
   您可以在 API 参考中了解这一点:https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points
   Is here an AngularJS equivalent for Angular ng-container?
   Or should I create something myself with a transclude directive?
   Example use cases:
   
   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>
   There should not be additional level in the DOM tree, and instead <td>s should be direct children of <tr> element.
   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.
   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>
   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.
   
   解决方案
   In cases you have mentioned, you can use ng-repeat-start and ng-repeat-end pair, respectively:
   
   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 lists:
   <dl>
     <dt ng-repeat-start="item in items">{{ item.term }}</dt>
     <dd ng-repeat-end>{{ item.definition }}</dd>
   </dl>
   
   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>
   
   You can read about this in API reference: https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points
   这篇关于AngularJS 等效于 Angular ng-container的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
   
                               
                           
   
               
   
   
   
           
   
               
   
   
   
           
   
       
   
           
   
               登录
               关闭
           
           
   
               
   
                   扫码关注1秒登录
               
               
   
                   
               
               
   
                   
                   
               
               
   
                   发送“验证码”获取
                   |
                   15天全站免登陆
               
               
   
           
       
   
       
   
   		
   
   			友情链接：
               IT屋
               Chrome插件
               谷歌浏览器插件
           
           
   
               IT屋
               ©2016-2022 琼ICP备2021000895号-1
               站点地图
               站点标签
               SiteMap
               <免责申明>
               本站内容来源互联网,如果侵犯您的权益请联系我们删除.