我将如何使用AngularJS呈现dynamic定义列表？

我将如何使用AngularJS呈现dynamic定义列表？

例：

数据：

[ { 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> 

适用于dynamic数字的dds和静态数字的dts，但不是两者的dynamic数字。

Answer 1

在Angular 1.2中新增了一个允许ng-repeat-start / ng-repeat-end的新function。

有了这个function，你可以这样写你的html：

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

看完整的工作示例这个plnkr 。

Answer 2

我创build了一个名为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> 

我猜dl内的div是不允许的规范，但它的作品 – 至less在铬： – 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>