Angular.js: 用 DL / DD / DT 重复

创建于 2013-01-26 · 76评论 · 资料来源: angular/angular.js

ngRepeat 何时（以及如何）处理定义列表是否有任何时间表？

如果您不熟悉这个问题：目前 ngRepeat 使用单个元素。对于大多数 HTML，这可以正常工作。但是对于诸如<dl>类的定义列表，这不起作用。为什么？因为定义列表使用多个元素来定义单个列表项。

现在，有多种方法可以解决这个问题，但阅读此处表明 Angular 将使用注释来支持重复元素。

关于何时实施此功能的任何想法？或者是否有一个比较稳定的分支可以合并来解决这个问题？当前现有的解决方案_非常_hacky，违反标准，并且容易在 IE/等中破坏代码。

想法？

编辑：通过“可以合并的稳定分支”，我的意思是一个分支，我可以在我的站点上分叉运行并解决这个问题，直到代码正式合并。我为糟糕的措辞道歉:)

$compile feature

资料来源

leeola

最有用的评论

是的。我们有一个刚刚登陆的解决方案：e46100f7097d9a8f174bdb9e15d4c6098395c3f2

我正在关闭这个问题。

IgorMinar 于 2013-05-29

❤1 🎉1 👍1

所有76条评论

其次这个。这个问题我已经有一段时间了。

maxcan 于 2013-01-29

@IgorMinar在基于评论的 ng-repeat (https://github.com/angular/angular.js/pull/1646) 上做了一些工作，但由于评论在所有浏览器上都不能很好地播放，因此不太可能合并。相反，他们正在寻找替代解决方案，可能带有“开始和结束重复标签”或“开始重复和重复标签的元素数量”

petebacondarwin 于 2013-01-29

如何允许像 {{ }} 这样的对中的模板

也许：
{{! ng-repeat = "foo in l"

富

！}}

在相关说明中，我有一个类似的问题，第二个插值形式会不会有很大的技术挑战
像 {{{ }}} 没有转义 html 字符但也没有创建
新跨度？

2013 年 1 月 29 日星期二下午 12:38，Pete Bacon Darwin <
[email protected]> 写道：

@IgorMinar https://github.com/IgorMinar做了一些工作
基于评论的 ng-repeat (#1646https://github.com/angular/angular.js/issues/1646)
但由于评论在所有浏览器上都不能很好地播放，因此不太可能
合并。相反，他们正在寻找替代解决方案，可能
带有“开始和结束重复标签”或“开始重复和数量
重复标签的元素"
—
直接回复本邮件或在 Gi tHub上查看

maxcan 于 2013-01-29

我刚刚遇到了一个表，该表想要为数组中的每个对象生成两个“td”元素。

zilles 于 2013-02-09

+1 添加此功能。刚刚遇到了同样的限制。

bowsersenior 于 2013-03-19

：竖起大拇指：

es128 于 2013-04-03

同样的问题在这里。我很想看到像“ng-repeat-children”这样的东西只重复子元素而不是当前元素或一种“ng-omit-tag”（删除当前标签但保留子元素）被使用与 ng-repeat 一起使用。这将避免生成大量无效标记来解决此问题。

jensens 于 2013-04-19

不完全理解正在讨论的限制。为什么将 ng-repeat 放在父元素上有效？ http://jsfiddle.net/JyWdT/13/
有人可以创建一个更详细地解释问题的小提琴吗？

lgalfaso 于 2013-04-21

lgalfaso，你的小提琴创建了多个定义列表，每个列表都有一个定义。所需的输出是一个具有多个定义的定义列表。

或者就我而言，我需要为数组中的每个项目创建一对“td”元素。
说我有一个数组，

[{name:dan, age:15}, {name:steve, age:21}]

我需要输出：

<tr><td>dan</td><td>15</td><td>steve</td><td>21</td></tr>

目前还没有办法用 angular 来实现这一点。

zilles 于 2013-04-21

你不能通过将 ng-repeat 放在 tr 元素上来做到这一点吗？

http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE?p=preview

在 2013 年 4 月 21 日星期日下午 2:24，zilles [email protected]写道：

lgalfaso，你的小提琴创建了多个定义列表，每个列表都有一个
定义。所需的输出是一个定义列表，其中包含多个
定义。
或者就我而言，我需要为中的每个项目创建一对“td”元素
数组。
说我有一个数组，
[{姓名：丹，年龄：15 }，{姓名：史蒂夫，年龄：21 }]
我需要输出：
担15史蒂夫21
目前还没有办法用 angular 来实现这一点。
—
直接回复本邮件或在Gi tHub上查看
.

logicbomb 于 2013-04-21

哦，明白了，无视我之前的评论
2013 年 4 月 21 日上午 9:09，“杰森·图里姆”杰森。 [email protected]写道：

你不能通过将 ng-repeat 放在 tr 元素上来做到这一点吗？
http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE?p=preview
在 2013 年 4 月 21 日星期日下午 2:24，zilles [email protected]写道：
lgalfaso，你的小提琴创建了多个定义列表，每个列表都有一个
定义。所需的输出是一个定义列表，其中包含多个
定义。
或者就我而言，我需要为中的每个项目创建一对“td”元素
数组。
说我有一个数组，
[{姓名：丹，年龄：15 }，{姓名：史蒂夫，年龄：21 }]
我需要输出：
担15史蒂夫21
目前还没有办法用 angular 来实现这一点。
—
直接回复本邮件或在Gi tHub上查看
.

logicbomb 于 2013-04-21

由于我刚刚遇到 dl / dt + dd 问题，我确认新的 ng-repeat-children（或 ng-repeat-inner）是一个缺失的强制性指令。

stoussaint 于 2013-04-23

choffmeister 于 2013-04-23

关于新指令 ng-repeat-inner 的提案。如果这个提议没问题，那么会修改所有的指南

lgalfaso 于 2013-04-24

我认为最好使用相同的ng-repeat指令，但允许在 HTML 注释中使用该指令，正如原始帖子所建议的那样。

这样的事情应该可以工作：

<dl>
  <!-- ng-repeat="(name, definition) in myList" -->
  <dt>{{name}}</dt>
  <dd>{{definition}}</dd>
  <!-- /ng-repeat -->
</dl>

不确定如何实现要重复的块的开始和结束（@ProLoser 建议使用 ），但我认为使用 HTML 注释将是一个优雅的解决方案。

bowsersenior 于 2013-04-24

鉴于 minifier 可以杀死评论和其他评论问题，我
不要认为这很好。但是，我喜欢使用 ng-repeat 的想法。
包含属性 ng-repeat-single-root 或
当设置为 true 时，将在没有根的情况下运行 ng-repeat
元素？例如：

{一世}: {一世}

会成为：

1: 1
2: 2
3: 3

2013 年 4 月 23 日，星期二，下午 3:54，Mani Tadayon通知@github.com 写道：

我认为最好使用相同的 ng-repeat 指令，但允许
将该指令用于 HTML 注释，作为原始帖子
建议。
这样的事情应该可以工作：
{{姓名}}
{{定义}}
不确定如何重复块的开头和结尾
将实现（我弥补了在我的例子中），
但我认为使用 HTML 注释将是一个优雅的解决方案。
—
直接回复本邮件或在Gi tHub上查看
.

maxcan 于 2013-04-24

maxcan，我可以看到“单根”的优点，因为您保持源 html 有效，但是该构造不允许您在“dl”标签内添加任何其他内容......例如您想要的固定定义包括在您的动态定义循环之前。 lgalfaso 的解决方案可以解决这个问题。

zilles 于 2013-04-24

@maxcan没有大的返工或性能

lgalfaso 于 2013-04-24

我喜欢@bowsersenior的建议，但我更喜欢将其作为结束评论： 

ProLoser 于 2013-04-24

这对性能的打击是一种耻辱。反正我强烈赞同
@lgalfaso的解决方案，假设您可以将指令放入 div 而不是
只是一个评论..

在 2013 年 4 月 24 日星期三下午 1:58，Dean Sofer通知@github.com 写道：

我喜欢@bowsersenior https://github.com/bowsersenior的建议，但是
我更喜欢这个作为结束评论：
—
直接回复本邮件或在Gi tHub上查看
.

maxcan 于 2013-04-24

我同意@ProLoser 的观点，即是 HTML 注释方法中更好的结束标记。需要注意的是，angular 允许在 HTML 注释中定义指令，因此我不认为 HTML 注释可以作为解决此问题的潜在解决方案而被丢弃。请记住，核心 Angular 开发人员表示他们计划使用 HTML 注释来解决此堆栈溢出问题中的此问题（如原始海报所指出的那样）：

http://stackoverflow.com/a/10458127/457819

bowsersenior 于 2013-04-24

我不介意丢弃它们，只要有没有办法做到这一点
注释。

2013 年 4 月 24 日星期三下午 2:41，Mani Tadayon通知@github.com 写道：

我同意@ProLoser https://github.com/ProLoser 是 HTML 注释方法中更好的结束标记。一
注意，angular 允许在 HTML 注释中定义指令，所以我不
认为可以丢弃 HTML 注释作为解决此问题的潜在解决方案
问题。请记住，核心 Angular 开发人员表示他们
计划使用 HTML 注释来解决此堆栈溢出中的此问题
问题（如原始海报所指出的）：
http://stackoverflow.com/a/10458127/457819
—
直接回复本邮件或在Gi tHub上查看
.

maxcan 于 2013-04-24

+1 到@lgalfaso的 ng-repeat-inner。我终于喜欢能完成这件事的东西。

hsdk123 于 2013-04-25

淘汰赛通过评论来做到这一点。我正在尝试移植我在淘汰赛中使用 dl 标签所做的事情，似乎在解决此问题之前这是不可能的。

bsantucci 于 2013-04-25

这是我的意见，因此如果没有来自@mhevery或@IgorMinar的输入，请持保留态度。
我确实看到使 ng-repeat 与注释一起工作更灵活，无论如何，如果不更改 $compiler，它看起来并不自然，因此它可以处理“注释之间”类型的指令。原因是指令需要注意嵌套和查看元素之外的元素看起来很奇怪

lgalfaso 于 2013-04-26

如果评论/无评论是持续争议的原因，我们不能同时拥有它们吗？我发现很难理解像这样常见的问题已经超过 3 个月没有得到解决。如果这背后的原因主要是由于对实施的争议，那么实际实施某些东西（并且可能在未来更新/添加）似乎比等待更长时间而没有更“最佳”的东西更可取。

但在大多数情况下，在我看来，如果 ng-repeat-inner 指的是在某个事物“内部”重复一组元素，则意味着在大多数情况下，您已经创建了某种独占的外部容器。因此，虽然注释实现可能更通用（尽管可能我想尽可能避免额外的 1/2 行代码），但我觉得它可能较少使用（并且可能应该不那么优先）元素内指令。

hsdk123 于 2013-04-26

是否使用 HTML 注释的问题与这个问题已经悬而未决几个月没有任何关系。我认为所需要的只是角度维护者的一些注意力来决定问题并实施解决方案。

bowsersenior 于 2013-04-26

如果您错过了它，请参阅此处https://github.com/angular/angular.js/pull/1646关于基于评论的转发器的问题。 @lgalfaso解决方案在这一点上更有希望。

es128 于 2013-04-26

感谢您指出 #1646 。 @mhevery在该讨论中有

我希望我们知道什么是“更好的方法”！

bowsersenior 于 2013-04-26

核心团队的共识是，目前解决此问题的最佳方法是以下之一（我们尚未确定语法，但所有这些的实现几乎相同）：

所有这些例子都包含两个td标签，我故意这样做，即使它是非法的，因为我想表明中继器应该允许重复任意数量的元素- 最好将这个例子转换为使用 table和表行，但我现在要脱机，没有时间重构它们。

语法 A：

<dl>
  <dt ng-repeat="(name, definition) in myList">{{name}}</dt>
  <dd ng-repeat-next>{{definition}}</dd>
  <dd ng-repeat-next>{{definition}}</dd>
</dl>

语法 B：

<dl>
  <dt ng-repeat-start="(name, definition) in myList">{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

语法 C：

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-start>{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

语法 D：

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-group>{{name}}</dt>
  <dd ng-repeat-group>{{definition}}</dd>
  <dd ng-repeat-group>{{definition}}</dd>
</dl>

从长远来看，一旦我们有更好的浏览器支持，我们将开始使用新的<template>元素，这将允许我们简单地执行以下操作：

语法 X：

<template>
  <dl>
    <ng repeat="(name, definition) in myList">
      <dt>{{name}}</dt>
      <dd>{{definition}}</dd>
      <dd>{{definition}}</dd>
    </ng>
  </dl>
</template>

IgorMinar 于 2013-04-26

如果有人想为此解决方案制作 PR，它将被合并。此外，如果您对特定语法有偏好，请大声说出来。

IgorMinar 于 2013-04-26

感谢您的投入。从我的角度来看，语法 A 对于嵌套循环并不明确，如下所示

<dl>
  <dt ng-repeat="...">loop 1</dt>
  <dt ng-repeat="..." ng-repeat-next>loop 2</dt>
  <dd ng-repeat-next>is this within loop 2 or only loop 1</dd>
</dl>

语法 B 和 C 大致相同，我喜欢这两种选择（即使我认为语法 B 在某种程度上更好）

除非我遗漏了什么，否则语法 D 与语法 A 具有相同的嵌套循环问题

lgalfaso 于 2013-04-26

如果可能的话，我会选择 B，纯粹是因为必须写最少的字母。它看起来也是最对称的 - 由于视觉对称，我觉得它最容易管理。

hsdk123 于 2013-04-27

lgalfasos 的评论指出了一个有趣的困境。如果他的示例中的嵌套循环位于第一个元素而不是第二个元素上会怎样。然后所有版本的语法现在都不清楚，除非我遗漏了什么。

zilles 于 2013-04-27

我不太明白@lgalfaso建议的ng-repeat-inner和语法 X 中的ng repeat之间的区别，尽管<template>包装。有人能解释一下吗？

hsdk123 于 2013-04-27

我也不确定我是否理解它，但我猜<ng>标签不会成为 DOM 的一部分，从而避免了dl下的非法嵌套结构。

至于提议的语法，我会投票给 B。

es128 于 2013-04-27

我相信语法 X case 允许一个通用的虚拟包装元素<ng>它不是 DOM 的一部分并且可以承载各种指令。这比ng-repeat-inner更通用，后者仅适用于ng-repeat的特定用例。

bowsersenior 于 2013-04-27

如果长期目标语法 X 只是ng-repeat-inner的更通用版本，我觉得ng-repeat-inner也应该（*不仅仅是）沿提议的 A、B 之一采用， C、D 表示以下内容：

语法 X 和ng-repeat-inner都具有相同的 dom 结构
：如果语法 X 是长期目标，那么现在有一些可以在结构上与其类似以防止未来重构的东西会很好。
在大多数情况下ng-repeat-inner就足够了
：目的是创建一个外部容器来重复内部元素。

hsdk123 于 2013-04-27

@daegon123 @IgorMinar列出的任何语法（包括 X）和ng-repeat-inner之间的区别在于，这些语法让您可以在没有不同容器的情况下任意重复一组元素。例如，重复一组<tr>而table或tbody还有其他不重复的<tr> tbody 。在这种情况下，要重复的元素没有可将ng-repeat-inner绑定到的不同父级。

<table>
    <thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

es128 于 2013-04-27

或者<dl>每个对象的多个定义

<dl>
    <dt ng-repeat-start="...">{{item.term1}}</dt>
    <dd>{{item.def1}}</dd>
    <dt>{{item.term2}}</dt>
    <dd>{{item.def2}}</dd>
    <dt>{{item.term3}}</dt>
    <dd ng-repeat-end>{{item.def3}}</dd>
</dl>

es128 于 2013-04-27

@es128感谢您的评论和代码。这正是我提议将ng-repeat-inner与其他列出的语法之一“一起”接受的原因，但是在您的评论中看到实际代码已经开始让我怀疑是否甚至需要ng-repeat-inner 。如果我遇到了什么，我会再发表评论 - 再次感谢！

hsdk123 于 2013-04-27

ng-repeat-inner 的问题在于它不能用于所有情况，例如：

<ul>
  <li>some static prefix item</li>
  <!-- repeat these nodes -->
    <li>{{ something }}</li>
    <li>{{ something else }}</li>
  <!-- repeat end -->
  <li>some static postfix item</li>
</ul>

因为您不能将人工元素（如 div）放入 ul（根据 html 规范），所以这里不能使用 ng-repeat-inner。

顺便说一句，使用模板元素，我们将能够在 ul 和 li 之间放置一个人工元素。

也不要太执着于语法 X，这只是我们最终能够做的事情的一个快速而肮脏的例子，确切的语法还有待讨论，但是当我在做的时候，这里是另一个一：

语法 Y：

<ul>
  <li>some static prefix item</li>
  <template repeat="item in items">
    <li>{{ item.name }}</li>
    <li>{{ item.owner }}</li>
  </template>
  <li>some static postfix item</li>
</ul>

IgorMinar 于 2013-04-27

为 ng-repeat 组设置一个 id 怎么样？
然后我们可以从任何级别自由地将项目附加到它。就像是

<dl>
    <dt ng-repeat="item in items" ng-repeat-group="someId">{{item.term}}</dt>
    <dd ng-repeat-with="someId">{{item.definition}}</dd>
</dl>

可以允许我们需要的灵活性。

mlarcher 于 2013-04-27

建议的语法 C 实现，结果证明我认为这是一种语法，可以让其他元素和指令轻松使用相同的机制

lgalfaso 于 2013-04-27

卢卡斯干得好！我花了一个晚上试图实现语法 C。它工作正常，但由于嵌入将所有ng-repeat s 转换为注释，因此不支持嵌套。

如果我不能横向查找ng-repeat-start的DOM，我将无法计算匹配的ng-repeat-end属性的深度。你的方法似乎是解决问题......

lrlopez 于 2013-04-28

嗯……好像有点不对劲。您的提交中缺少文档，所以我可能没有使用正确的语法。

看看这个：
http://plnkr.co/edit/sVilxKaNrhNM4JrkuQ5r?p=preview

我预计非嵌套情况的输出为：

Term: elastic
     Static term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
     This definition should be repeated for every term: 'par' term

对于嵌套的：

Term: elastic
     Static term
Subterm: superelastic
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'elastic' term
Subterm: subelastic
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'elastic' term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
Subterm: superpar
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'par' term
Subterm: subpar
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'par' term
     This definition should be repeated for every term: 'par' term

我错过了什么吗？

lrlopez 于 2013-04-28

@lrlopez您放置的示例未使用最新版本的代码。此外，第 23 行还有一个额外的</dl>

lgalfaso 于 2013-04-28

感谢您的快速回复！没错，第 23 行还有一个额外的</dl> 。我还更新了库。尽管如此，我仍然无法使用嵌套示例...

lrlopez 于 2013-04-28

好的，看起来 DOM 中处于同一级别的多元素指令是一个真正的问题。更新了 PR 并修复了此问题

lgalfaso 于 2013-04-28

诸如 ng-repeat-inner 或 ng-repeat-next 之类的修复只能解决无数情况中的一种，在这些情况中，绑定行为到实际 DOM 节点会限制您。

您可以通过添加对不在实际树中呈现的虚拟节点的支持来解决整个框架的问题，而不是单独修补每个指令。

使用注释的想法是相似的，但它会导致代码难看、难以阅读，您仍然需要一种方法来命名该节点并以某种方式关闭它。不要发明新的注释节点语法，而是使用现有的 HTML 语法。

将其视为类似于 SASS 静默类的概念：

<div id="myComplexList">
    <ng-virtual ng-repeat="...">
        <a></a>
        <b></b>
        <c></c>
    </ng-virtual>
</div>

Result:

<div id="myComplexList">
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    ...
</div>

ghost 于 2013-04-28

+1 对一般想法，但我会选择 ng-repeat-group 之类的东西。

<ng-repeat-group="b in ches">
// group markup to be repeated here
</ng-repeat-group>

ostera 于 2013-04-28

我喜欢虚拟节点的想法，但我反对它成为这里问题的通用解决方案。

如果可能的话，我想限制任何人造容器的创建。虽然容器可能不会显示在整体结果的 html 上，但它会使需要管理的 html 代码变得混乱。

在许多情况下，我们需要一些容器来包含我们想要重复的内容。前任：

<tr>
  <td ng-repeat-start>1</td>
  <td ng-repeat-end>2</td>
</tr>

（这里的容器是 [tr]s）

使用提议的虚拟节点解决方案将把它变成：

<tr>
  <ng-virtual ng-repeat="...">
     <td>1</td>
     <td>2</td>
  </ng-virtual>
</tr>

制作一个多余的容器：即使是这两行添加也让我觉得如果代码变长会是什么样子会感到不舒服。

另一个问题是，试图掌握代码当前所在的 dom 级别会开始变得乏味。
这是@es128的一些代码

<table>
<thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

使用虚拟节点将其变为：

<table>
<thead>...</thead>
    <ng-virtual ng-repeat="...">
        <tr">...</tr>
        <tr>...</tr>
        <tr>...</tr>
    </ng-virtual>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

前 3 个 trs 和最后一个 tr 的重复处于同一级别，但如果我只是快速浏览代码，我可能会将它们误认为不同级别，否则我将开始寻找自己繁琐地计算（可能不正确）代码的工作级别，尤其是当这些东西开始嵌套时。

hsdk123 于 2013-04-28

这是我喜欢的特定语法版本（B 类）：

<ul>
  <li>some static prefix item</li>
  <li ng-repeat-block="(name, definition) in myList">{{ something }}</li>
  <li>{{ something else }}</li>
  <li ng-repeat-block-close>{{ something else }}</li>
  <li>some static postfix item</li>
</ul>

honzajde 于 2013-04-28

@stanvass你的提议是@IgorMinar作为语法 X 发布的内容的变体，主要问题是浏览器支持不存在

lgalfaso 于 2013-04-28

我刚刚意识到，在您只想重复一个内部元素的情况下，同时拥有ng-repeat-start和ng-repeat-end是多余的。

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

如果我们也可以有一个ng-repeat-single来防止这种情况发生，那就太好了。前任。

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

hsdk123 于 2013-05-07

@daegon123如果你想重复一个元素，就做

<tr>
  <td ng-repeat="...">repeat this</td>
</tr>

不需要ng-repeat-start也不需要 ng- repeat-end

lgalfaso 于 2013-05-07

@lgalfaso谢谢，似乎我已经被提议的语法所吸引，以至于我忘记了我们已经拥有的东西。希望我们尽快实现 ng-repeat-start/end。

hsdk123 于 2013-05-07

我认为这个问题不是简单地重复一个元素。它更多地是关于如何在不重复其父元素的情况下重复一组元素。即<dt>..<dd>... - 但这里还有许多其他很好的例子。

jensens 于 2013-05-07

一旦开始嵌套重复，语法 X 是唯一明确定义的语法。您将如何在语法 AD 中编写以下内容：

<template>
  <dl>
    <ng repeat="book in myList">
      <dt ng-repeat="author in book.authors">{{author.name}}</dt>
      <dd>{{book.title}}</dd>
      <dd>{{book.description}}</dd>
    </ng>
  </dl>
</template>

zilles 于 2013-05-07

这是更好的建议。
从 My Blackberry® 发送

- - -原始信息 - - -
来自：daegon123 [email protected]
日期：2013 年 5 月 6 日星期一 22:57:16
至：angular/angular.jsangular。 [email protected]
回复：“angular/angular.js” [email protected]
主题：回复：[angular.js] ngRepeat with DL / DD / DT (#1891)

我刚刚意识到，在您只想重复一个内部元素的情况下，同时拥有ng-repeat-start和ng-repeat-end是多余的。

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

如果我们也可以有一个ng-repeat-single来防止这种情况发生，那就太好了。前任。

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

直接回复此邮件或在 GitHub 上查看：
https://github.com/angular/angular.js/issues/1891#issuecomment -17524685

supercool27 于 2013-05-10

+1，这是一个很大的限制。

xixixao 于 2013-05-21

：+1：期待看到解决方案！我现在打算使用<li> ，但是当 angular 提出解决方案时，我很乐意重构该标记 =)

adityamenon 于 2013-05-25

#2783 能解决这个问题吗？

symblify 于 2013-05-26

是的。我们有一个刚刚登陆的解决方案：e46100f7097d9a8f174bdb9e15d4c6098395c3f2

我正在关闭这个问题。

IgorMinar 于 2013-05-29

❤1 🎉1 👍1

在这个简单的例子中，我得到了错误： <TypeError: Object #<Text> has no method 'hasAttribute'> ：

<table>
        <tr ng-repeat-start="value in [1,2,3,4]">I get repeated</tr>
        <tr ng-repeat-end>I also get repeated</tr>
    </table>

gevgeny 于 2013-06-02

也得到了 gevgeny 状态的问题。
没有方法“hasAttribute”>

<tr>
                <td data-ng-repeat-start="column in selectedItem.Beds" class="text-center">Avail. Beds</td>
                <td data-ng-repeat-end>Extra Bed Spaces</td>
</tr>

kharnt0x 于 2013-06-03

@kharnt0x看到这个 puul 请求https://github.com/angular/angular.js/pull/2859

gevgeny 于 2013-06-03

#2783 如何解决这个问题：

{[{h: "1",
   o: [{h: "1.1",
        o: [{h: "1.1.1"},
            {h: "1.1.2"},
            {h: "1.1.3"}]},
       {h: "1.2",
        o: [{h: "1.2.1"},
            {h: "1.2.2"},
            {h: "1.2.3"}]},

....

它需要输出如下内容：

<h1>1</h1>
<h2>1.1</h2>
<h3>1.1.1</h3>
<h3>1.1.2</h3>
<h3>1.1.3</h3>
<h2>1.2</h2>
<h3>1.2.1</h3>
<h3>1.2.2</h3>
<h3>1.2.3</h3>

它的语法是什么？

ChrisCinelli 于 2013-06-18

@ChrisCinelli尝试使用hgroup

<h1>1</h1>
<hgroup>
    <h2>1.1</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
    <h2>1.2</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
<hgroup>

gevgeny 于 2013-06-18

因此 hgroup 似乎已从 HTML5 ( http://html5doctor.com/the-hgroup-element/ ) 中删除，除此之外，正如我所说，问题更复杂，并且仅使用了标题标签。
这显然是一个应该被允许的用例，并且根本不会破坏 Angular 的声明式视图哲学......

ChrisCinelli 于 2013-06-18

对于您正在寻找的特定输出，您是否考虑过 CSS
柜台？

看：
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
http://css-tricks.com/almanac/properties/c/counter-increment/

2013 年 6 月 18 日星期二下午 2:46，Chris Cinelli通知@ github.com 写道：

因此 hgroup 似乎已从 HTML5 中删除（
http://html5doctor.com/the-hgroup-element/ ），除此之外，就像我一样
说问题更复杂，标题标签仅用于
例子。
这显然是一个应该被允许的用例并且不会中断
Angular 的所有声明式视图哲学......
—
直接回复本邮件或在Gi tHub上查看
.

MikeMcElroy 于 2013-06-18

我用标题作为例子来说明......实际上我有一个相对复杂的<div> ，数据结构中的每个级别都有不同的结构。

到目前为止，我发现的唯一解决方案是将 Javascript 中的数据结构线性化，并对不同级别使用 ng-switch，这将需要我额外的 div 级别。
这个解决方案有开销（即内存和 CPU 来线性化数据结构），并且 HTML 看起来比我可以使用的下划线模板更不清晰......

ChrisCinelli 于 2013-06-19

您可以为每个级别制定指令吗？我不确定是什么样的
你在这里谈论的结构，所以我只是抓住了稻草。
但根据我的经验，当你有
访问指令和 ng-include，并导致意大利面条代码模板。

2013 年 6 月 18 日星期二下午 4:27，Chris Cinelli通知@ github.com 写道：

我用标题作为例子来说明......实际上我有
中每个级别具有不同结构的相对复杂的 div
数据结构。
到目前为止，我发现的唯一解决方案是将树线性化
Javascript 并在不同级别使用 ng-switch。
这个解决方案有开销（即内存和 CPU 来线性化数据
结构），并且 HTML 将看起来不那么清晰
我可以用下划线模板代替...
—
直接回复本邮件或在Gi tHub上查看
.

MikeMcElroy 于 2013-06-19

这是它的样子： http :
非常短的标签（1.xx x）、描述、复选标记的数量等，都来自数据库。
我正在探索将这部分转换为 Angular 的选项，但到目前为止还没有骰子。

当前的观点非常缺乏逻辑，并且相对清晰地说明了正在发生的事情。
如果我理解得很好，您几乎建议必须在一段 javascript 中打破每个级别。

在我看来，这看起来更混乱、更不统一、更不可读。鉴于具有显示此面板的所有信息的数据结构，当逻辑完全与视图相关且非常特定于该视图时，为什么我需要在不同的文件（模块/控制器）中使用代码？恕我直言，控制器应该是（现在在当前实现中）：

从模型中获取数据
将模型传递给视图，以便框架可以呈现它

当然我可以添加一些额外的 div 并更改 CSS，但是如果这对于使其与 Angular 一起工作是必要的，那么感觉 Angular 阻碍了在这里完成工作的方便和优雅。

ChrisCinelli 于 2013-06-19

我发现 KnockoutJS 中的数据绑定，它允许绑定到 html 元素<div data-bind="foreach: ...">以及“无容器控制流语法”，  ，非常有用，并认为如果Angular 可以支持一组类似的语法选项，非常类似于@bowsersenior建议的语法。

有关 Knockout 的“无容器”选项的更多详细信息：
http://knockoutjs.com/documentation/foreach-binding.html

mg1075 于 2013-08-31

+1 @mg1075虚拟语法。
KnockoutJS 可以更轻松地处理 dd 和嵌套集合。
例如http://stackoverflow.com/questions/20062032/nested-table-using-ng-repeat

diego-vieira 于 2013-11-19

此页面是否有帮助？

0 / 5 - 0 等级

Angular.js: 用 DL / DD / DT 重复

最有用的评论

所有76条评论

相关问题