Angular.js ng-repeat 跨多个元素
Posted
技术标签:
【中文标题】Angular.js ng-repeat 跨多个元素【英文标题】：Angular.js ng-repeat across multiple elements 【发布时间】：2013-05-29 19:11:03 【问题描述】：这里已经部分解决了这个问题：Angular.js ng-repeat across multiple tr's
但这实际上只是一种解决方法，它实际上并没有解决核心问题，即：如何在没有包装器的情况下跨多个元素使用 ng-repeat？
例如，jquery.accordion 要求你重复一个 h3 和 div 元素，用 ng-repeat 怎么能做到这一点？
【问题讨论】：
【参考方案1】：我们现在对此有适当的支持，请参阅：
AngularJs Commmit
通过此更改，您现在可以执行以下操作：
<table>
<tr ng-repeat-start="item in list">
<td>I get repeated</td>
</tr>
<tr ng-repeat-end>
<td>I also get repeated</td>
</tr>
</table>
【讨论】：
如果它可以帮助其他人......这在 angularjs.org 网站上的 AngularJs 的稳定和不稳定版本中均不可用。为了让它工作，我必须安装最先进的 Angular.js - 操作方法在这里：***.com/questions/17501052/… 正如@geoidesic 建议的那样，这在 1.1.5 之后登陆，所以在 1.1.6（或很可能是 1.2.0）中注意它 只需要添加 ng-repeat-start 属于当前（8 月 13 日）的不稳定版本 如果第二个要回答 Andre 关于表格中超过 2 个级别的 ng-repeat 的问题，您可以使用多个 ng-repeat-start 来完成此操作。
<tr ng-repeat-start="items in list">
<td>items.title</td>
</tr>
<tr ng-repeat-start="item in items">
<td>item.subtitle</td>
</tr>
<tr ng-repeat-end ng-repeat="value in item.values">
<td>value.col1</td>
<td>value.col2</td>
</tr>
<tr ng-repeat-end></tr>
这是一个plunker 示例
【讨论】：
试图完成这项工作，但我只得到：未终止的属性，找到'ng-repeat-start'但没有找到匹配的'ng-repeat-end'。这不再起作用了吗？使用角度 1.5【参考方案3】：更新：此答案已过时。请参阅@IgorMinar 的回答并使用标准的ng-repeat-start 和ng-repeat-end 指令。
有两种选择：
第一个选项是创建将呈现多个标签并替换源标签的指令 (jsfiddle)
<div multi ></div>
angular.module('components').directive('multi', function ($compile)
return
restrict: 'A',
scope :
first : '=',
last : '=',
,
terminal:true,
link: function (scope, element, attrs)
var tmpl = '', arr = [0,1,2,3]
// this is instead of your repeater
for (var i in arr)
tmpl +='<div>another div</div>'
var newElement = angular.element(tmpl);
$compile(newElement)(scope);
element.replaceWith(newElement);
)
第二个选项是使用更新的 Angular 源代码启用注释样式 ngRepeat 指令 (plnkr)
<body ng-controller="MainCtrl">
<div ng-init="arr=[0,1,2]" ></div>
<!-- directive: ng-repeat i in arr -->
<div>i</div>
<div> 'foo' </div>
<!-- /ng-repeat -->
arr
<div ng-click="arr.push(arr.length)">add</div>
</body>
【讨论】：
听起来不错。虽然我一点都不懂！在你的第一个例子中，我没有看到 ng-repeat，所以我不确定它是如何相关的（我看了小提琴，但它太复杂了，我无法理解它的头部或尾部）。你的第二个例子对我来说只是 gobbledigook。 第一个示例没有解决问题，因为您仍然会在两个元素周围重复包装......即包含 ng-repeat 指令的元素也会重复 - 我只是想要要重复的内部元素。 @user2448430 不，你没有。element.replaceWith(newElement); 将用你需要的替换包装标签。您也可以在指令中添加循环，并在 tmpl 中添加任意数量的标签。
我不同意。试了一下，它重复了包含 ng-repeat 指令的元素。第二个例子也没有实际工作。 div 不会重复，它只是在您的 plnkr 示例中输出的数组。
@JoshGough 确实如此，所以我最终将规则添加到我的 CSS 以隐藏这些跨度。以上是关于Angular.js ng-repeat 跨多个元素的主要内容，如果未能解决你的问题，请参考以下文章
Angular.js ng-repeat 按具有多个值之一（或值）的属性过滤
如何在 angular.js 中解析 ng-repeat 中的 HTML [重复]
angular.js > 如何在视图中获取内部 JSON 数据（使用 ng-repeat 指令）