Max Nanasy Max Nanasy - 1 month ago 10
AngularJS Question

How would I render a dynamic definition list using AngularJS?

How would I render a dynamic definition list using AngularJS?

Example:

Data:

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


Desired HTML:

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


The example at http://docs.angularjs.org/tutorial/step_08:

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


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

Answer Source

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

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>

See this plnkr for a full working example.