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

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>

有关完整的工作示例，请参见此plnkr。

我创建了一个名为repeatInside的指令来解决此类问题。

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

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

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

我猜想div里面dl是规范所不允许的，但是它可以工作-至少在Chrome :-D中

我们计划ng-repeat在评论中提供支持。

这个答案似乎在Angular v1.2.7中对我不起作用，因此我想发布一个对我来说很好的细微变化：

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