我将如何使用的角度呈现一个动态的定义列表? [英] How would I render a dynamic definition list using angular?

查看:107
本文介绍了我将如何使用的角度呈现一个动态的定义列表?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何将采用了棱角分明呈现动态定义列表?

How would I render a dynamic definition list using angular?

例如:

数据:

[
    {
        key: 'a',
        value: 'x'
    }, {
        key: 'b',
        value: 'y'
    }
]

所需的HTML:

Desired HTML:

<dl>
    <dt>a</dt>
    <dd>x</dd>
    <dt>b</dt>
    <dd>y</dd>
</dl>

在<一个例子href=\"http://docs.angularjs.org/tutorial/step_08\">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.

推荐答案

一个新功能,它允许NG-重复启动/ NG-重复年底在1.2角增加。

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.

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆