AngularJS ng-repeat没有html元素

Question

我目前正在使用这段代码来呈现一个列表:

<ul ng-cloak>
    <div ng-repeat="n in list">
        <li><a href="{{ n[1] }}">{{ n[0] }}</a></li>
        <li class="divider"></i>
    </div>
    <li>Additional item</li> 
</ul>

但是,该<div>元素在某些浏览器上导致一些非常小的渲染缺陷.我想知道有没有办法在没有div容器的情况下进行ng-repeat,或者有一些替​​代方法来实现相同的效果.

Answer 1

正如安迪·乔斯林所说他们正在研究基于注释的ng-repeats,但显然有太多的浏览器问题.幸运的AngularJS 1.2增加了内置的支持,无需增加新的指令子元素重复ng-repeat-start和ng-repeat-end.

这是添加Bootstrap分页的一个小例子:

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat-start="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li ng-repeat-end class="divider"></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

这里可以找到完整的工作示例.

John Lindquist还在他出色的egghead.io页面上有一个关于此的视频教程.

Answer 2

KnockoutJS无容器绑定语法

请耐心等一下:KnockoutJS为绑定提供了一个非常方便的选项,使用无容器绑定语法,foreach如foreach绑定文档的注释4中所述. http://knockoutjs.com/documentation/foreach-binding.html

正如Knockout文档示例所示,您可以在KnockoutJS中编写绑定,如下所示:

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

我认为这是相当不幸的AngularJS不提供这种语法.

Angular ng-repeat-start和ng-repeat-end

在AngularJS解决ng-repeat问题的方式中,我遇到的样本是jmagnusson在他(有用的)答案中发布的类型.

<li ng-repeat-start="page in [1,2,3,4,5]"><a href="#">{{page}}</a></li>
<li ng-repeat-end></li>

看到这种语法后,我原来的想法是:真的吗？为什么Angular强制所有这些额外的标记,我想要什么都没有,这在Knockout中更容易？但是hitautodestruct在jmagnusson的回答中的评论开始让我想知道:在单独的标签上使用ng-repeat-start和ng-repeat-end生成什么？

一种更清洁的使用方式ng-repeat-start和ng-repeat-end

在hitautodestruct的说法进行调查,将ng-repeat-end在一个单独的标签是什么我不希望在大多数情况下这样做,因为它会产生完全usesless元素:在这种情况下,<li>有没有在他们的项目.Bootstrap 3的分页列表对列表项进行样式设置,使得它看起来不会生成任何多余的项,但是当您检查生成的html时,它们就在那里.

幸运的是,你不需要做太多的事情来获得更清晰的解决方案和更少的html:只需将ng-repeat-end声明放在具有相同的html标签上ng-repeat-start.

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>    
  <li ng-repeat-start="page in [1,2,3,4,5]" ng-repeat-end><a href="#"></a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

这有三个好处:

1. 写的html标签少
2. Angular不会生成无用的空标签
3. 当重复的数组为空时,标记ng-repeat将不会生成,给你相同的优势Knockout的无容器绑定在这方面给你

但仍有一种更清洁的方式

在进一步回顾github关于Angular这个问题的评论后,https://github.com/angular/angular.js/issues/1891,
您不需要使用ng-repeat-start并ng-repeat-end获得相同的优势.相反,再次分享jmagnusson的例子,我们可以去:

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

那么何时使用ng-repeat-start和ng-repeat-end？根据角度文档,到

...重复一系列元素而不只是一个父元素......

足够的谈话,展示一些例子!

很公平; 这个jsbin通过五个例子来说明当你这样做以及什么时候不使用ng-repeat-end同一个标签时会发生什么.

http://jsbin.com/eXaPibI/1/

Answer 3

ngRepeat可能还不够,但您可以将它与自定义指令结合使用.如果你不介意一点点jQuery,你可以委托将divider项添加到代码中的任务.

 <li ng-repeat="item in coll" so-add-divide="your exp here"></li>

这样一个简单的指令并不需要一个属性值,但可能会给你很多可能性,比如根据索引,长度等有条件地添加一个分隔符或者完全不同的东西.