如何使用 AngularJS 呈现动态定义列表？

如何使用 AngularJS 呈现动态定义列表？

例如:

资料:

[
{
key: 'a',
value: 'x'
}, {
key: 'b',
value: 'y'
}
]

所需 HTML:

<dl>
<dt>a</dt>
<dd>x</dd>
<dt>b</dt>
<dd>y</dd>
</dl>

http://docs.angularjs.org/tutorial/step_08的例子是:

<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in phone.availability">{{availability}}</dd>
</dl>

适用于动态数量的 dds 和静态数量的 dts，但不适用于两者的动态数量。

13506 次浏览
小开

这是一个问题，因为您需要用一些元素包装它，以便执行重复操作。这不会是一个有效的 html-你会陷入同样的麻烦与无序列表或表..。

<dl>
<div ng-repeat="i in items">
<dt>\{\{i.key}}</dt>
<dd>\{\{i.value}}</dd>
</div>
</dl>

我想 dl内部的 div是不被规范允许的，但是它可以工作——至少在 Chrome:-D 中可以

我们计划在注释中支持 ng-repeat来支持这一点。

小开
最佳答案

在角度1.2中增加了一个允许 ng- 重复-开始/ng- 重复-结束的新特性。

使用这个特性，您可以像下面这样编写您的 html:

<dl>
<dt ng-repeat-start="i in items">\{\{i.key}}</dt>
<dd ng-repeat-end>\{\{i.value}}</dd>
</dl>

有关完整的工作示例，请参见 这个普林克。

小开

我已经创建了一个名为 在里面重复的指令来解决这样的问题。

<dl repeat-inside="word in dictionary">
<dt>\{\{word.name}}</dt>
<dd>\{\{word.definition}}</dd>
</dl>
小开

在 Angular v1.2.7版本中，这个答案似乎并不适合我，所以我想发布一个适合我的微小变化:

<dl>
<dt ng-repeat-start="(key, value) in items">\{\{key}}</dt>
<dd ng-repeat-end>\{\{value}}</dd>
</dl>

提交答案