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> 

http://docs.angularjs.org/tutorial/step_08で例：DDSとの動的な数の

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

作品スタティックニューdtsのmberは、両方の動的な数ではありません。

Answer 1

ng-repeat-start/ng-repeat-endを可能にする新しい機能がAngular 1.2で追加されました。フルワーキング例えば

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

参照this plnkr：

この機能を使用すると、このようにHTMLを書くことができます。

Answer 2

これは、繰り返しを行うためにいくつかの要素でラップする必要があるため、問題です。少なくともに - 私はdl内部divは仕様によって許可されますが、それが動作されていないと思います

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

...あなたは順不同リストまたはテーブルと同じトラブルになるだろう

- そして、それは有効なHTMLなるつもりはありませんChrome :-D

ng-repeatをサポートする予定です。

Answer 3

このような問題を解決するためにrepeatInsideというディレクティブを作成しました。

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

Answer 4

私は私のためによく働いわずかな変化を投稿したかったので、この答えは、角度v1.2.7で私のために動作していないようでした：

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