angularjs – 我如何使用angular渲染动态定义列表？

发布时间：2020-12-17 09:07:56 所属栏目：安全来源：网络整理

导读：如何使用angular渲染动态定义列表？例：数据： [ { key: 'a',value: 'x' },{ key: 'b',value: 'y' }] 所需HTML： dl dta/dt ddx/dd dtb/dt ddy/dd/dl 示例在http://docs.angularjs.org/tutorial/step_08： dl dtAvailability/dt dd ng-repeat="availabilit

如何使用angular渲染动态定义列表？

例：

数据：

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

适用于动态dd数和静态dts数，但不是两者的动态数。

在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。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!