如何使用AngularJS渲染动态定义列表？

Question

如何使用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数，但不适用于两者的动态数。

Answer 1

Angular 1.2中添加了一个允许ng-repeat-start / ng-repeat-end的新功能。

使用此功能，您可以像这样编写html：

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

有关完整的工作示例，请参阅this plnkr。

Answer 2

我已经创建了一个名为repeatInside的指令来解决像这样的问题。

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

Answer 3

这是一个问题，因为你需要用一些元素包装它才能重复。这不会是一个有效的HTML - 你会遇到无序的列表或表格同样的麻烦......

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

我认为规范不允许div内的dl，但它有效 - 至少在Chrome中是这样的：-D

我们计划在评论中支持ng-repeat以支持此功能。

Answer 4

这个答案在Angular v1.2.7中对我来说似乎没有用，所以我想发布一个对我有用的轻微变化：

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