Как мне отобразить список динамических определений, используя AngularJS?

Как мне отобразить список динамических определений с помощью функции AngularJS?

Пример:

Данные:

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

работает для динамического числа dds и статического числа dts, но не динамического числа обоих.

Ответ 1

В 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>

См. этот plnkr для полного рабочего примера.

Ответ 2

Я создал директиву repeatInside для решения таких проблем, как этот.

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

Ответ 3

Это проблема, потому что вам нужно обернуть ее некоторым элементом, чтобы повторить. И это не будет действительным html - вы столкнулись бы с такими же проблемами с неупорядоченными списками или таблицами...

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

Я предполагаю, что div внутри dl не разрешен спецификацией, но он работает - по крайней мере, в Chrome: -D

Мы планируем поддерживать ng-repeat внутри комментария для поддержки этого.

Ответ 4

Этот ответ, похоже, не работал у меня в Angular v1.2.7, поэтому я хотел опубликовать небольшое изменение, которое сработало для меня:

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