Javascript AngularJS ng重复，不含html元素

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

<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容器的情况下执行ng repeat，或者使用其他方法来实现相同的效果。

有一个comment指令限制，但ngRepeat不支持它（因为它需要一个元素来重复）

---

我想我看到angular团队说他们会处理评论ng重复，但我不确定。你应该在回购协议上为其发行一期债券

ngRepeat可能不够，但是您可以将其与自定义指令结合使用。如果您不介意一点jQuery，您可以将添加分隔符项的任务委托给代码

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

---

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

正如Andy Joslin所说，他们正在研究基于注释的ng重复。幸运的是，AngularJS 1.2添加了对重复的内置支持，而无需使用新指令

ng repeat start

和

ng repeat end

添加子元素

下面是一个添加的小示例：

可以找到完整的工作示例

---

John Lindquist也有一个问题。

我最近遇到了同样的问题，我必须重复任意的跨距和图像集合-在它们周围有一个元素不是一个选项-有一个简单的解决方案，但是，创建一个“null”指令：

app.directive("diNull", function() {
        return {
            restrict: "E",
            replace: true,
            template: ""
        };
    });

然后可以在该元素上使用repeat，其中Element.url指向该元素的模板：

<di-null ng-repeat="element in elements" ng-include="element.url" ></di-null>

这将在没有容器的情况下重复任意数量的不同模板

注意：嗯，我可以发誓这在渲染时删除了di null元素，但是再次检查它并没有…仍然解决了我的布局问题…curioser和curioser…

KnockoutJS无容器绑定语法 请耐心听我说：KnockoutJS提供了一个非常方便的选项，可以为其

foreach

绑定使用无容器绑定语法，如

foreach

绑定文档的注释4所述。

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

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

看到这种语法，我最初的想法是：真的吗？为什么Angular强制所有这些我不想做的额外标记，而这在淘汰赛中要容易得多？但是hitautodestruct在jmagnusson的回答中的评论让我开始思考：在不同的标签上使用ng repeat start和ng repeat end生成了什么

---

---

使用

ng repeat start

和

ng repeat end

在调查hitautodestruct的断言后，在一个单独的标记上添加

ng repeat end

正是我在大多数情况下不想做的事情，因为它会生成完全无用的元素：在这种情况下，

项中没有任何内容。Bootstrap3的分页列表设置了列表项的样式，这样看起来您没有生成任何多余的项，但是当您检查生成的html时，它们就在那里了

幸运的是，您不需要做太多工作就可以获得更干净的解决方案和更少的html：只需将

ng repeat end

声明放在具有

ng repeat start

的同一html标记上即可

<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>

---

那么何时使用

ng repeat start

和

ng repeat end

？根据

…重复一系列元素，而不仅仅是一个父元素

说够了，举几个例子吧！ 足够公平；这个jsbin将介绍五个示例，说明在同一个标记上使用和不使用

ng repeat end

时会发生什么

---

如果您使用的是Bootstrap，那么就您的情况而言，您可以这样做，以获得有效的HTML。然后，您将获得与添加li.divider相同的效果

创建一个类：

span.divider {
 display: block;
}

现在将代码更改为：

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

附加项目

以获得真正有效的解决方案

html

如果需要，这里的html内容包括内部重复循环

添加angular.js指令

//remove directive
(function(){
    var remove = function(){

        return {    
            restrict: "E",
            replace: true,
            link: function(scope, element, attrs, controller){
                element.replaceWith('<!--removed element-->');
            }
        };

    };
    var module = angular.module("app" );
    module.directive('remove', [remove]);
}());

//删除指令
（功能（）{
var remove=function（）{
返回{
限制：“E”，
替换：正确，
链接：功能（范围、元素、属性、控制器）{
元素。替换为（“”）；
}
};
};
var模块=角度模块（“应用”）；
模块指令（'remove'，[remove]）；
}());

简单解释一下

ng repeat将自身绑定到

元素并按其应该的方式循环，因为我们使用了ng repeat start/ng repeat end，所以它循环一块html而不仅仅是一个元素

---

然后，custom remove指令将

开始和结束元素与

放置在一起，您在谈论什么渲染问题？最后一个li分隔符看起来有点厚，就像它的堆叠（chrome win7）。这可能是一个css问题，但是，我想知道这是否可以在angular中修复。相比之下，knockoutJS允许使用无容器绑定。我知道，我在服务器端使用phptal，它们有一个tal:block标记专门用于此目的：）猜测DOM并不总是接受一种新的标记，而Angular更难接受这种标记。您还可以更新html吗

span.divider {
 display: block;
}

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

<remove  ng-repeat-start="itemGroup in Groups" ></remove>
   html stuff in here including inner repeating loops if you want
<remove  ng-repeat-end></remove>

//remove directive
(function(){
    var remove = function(){

        return {    
            restrict: "E",
            replace: true,
            link: function(scope, element, attrs, controller){
                element.replaceWith('<!--removed element-->');
            }
        };

    };
    var module = angular.module("app" );
    module.directive('remove', [remove]);
}());