如何使用AngularJS呈现动态定义列表? [英] How would I render a dynamic definition list using AngularJS?

问题描述

如何使用AngularJS呈现动态定义列表?

How would I render a dynamic definition list using 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，但不适用于两者的动态数.

works for a dynamic number of dds and a static number of dts, but not a dynamic number of both.

推荐答案

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

A new feature which allows ng-repeat-start/ng-repeat-end was added in Angular 1.2.

有了此功能，您可以像这样编写html:

With this feature, you can write your html like this:

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

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

See this plnkr for a full working example.

这篇关于如何使用AngularJS呈现动态定义列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！