如何使用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>

请参阅此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在评论中支持这一点.