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

<dl>
    <dt>Availability</dt>
    <dd ng-repeat="availability in phone.availability">{{availability}}</dd>
</dl>

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

score 102 · Accepted Answer

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>

See this plnkr for a full working example.

score 9 · Accepted Answer

I've created a directive called repeatInside to solve problems like this one.

<dl repeat-inside="word in dictionary">
    <dt>{{word.name}}</dt>
    <dd>{{word.definition}}</dd>
</dl>

score 7 · Accepted Answer

这是一个问题，因为您需要用一些元素包装它才能进行重复。这不会是一个有效的 html - 你会遇到与无序列表或表格相同的麻烦......

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

我猜div内部dl是不允许的，但它可以工作——至少在 Chrome 中:-D

我们计划ng-repeat在评论中支持这一点。

score 3 · Accepted Answer

This answer didn't seem to work for me in Angular v1.2.7 so I wanted to post a slight variation that worked well for me:

<dl>
    <dt ng-repeat-start="(key, value) in items">{{key}}</dt>
    <dd ng-repeat-end>{{value}}</dd>
</dl>

4 回答 4