angularjs - 如何使用 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完整的工作示例。