How would I render a dynamic definition list using AngularJS?

Question

How would I render a dynamic definition list using AngularJS?

Example:

Data:

[
    {
        key: \'a\',
        value: \'x\'
    }, {
        ke         


        

Answer 1

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.

Answer 2

This is a problem, because you need to wrap it with some element in order to do repeating. And that's not gonna be a valid html - you would get into the same trouble with unordered lists or tables...

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

I guess the div inside dl is not allowed by spec, but it works - at least in Chrome :-D

We plan to support ng-repeat inside a comment to support this.

Answer 3

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>

Answer 4

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>