71

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>

dd の動的な数と dt の静的な数では機能しますが、両方の動的な数では機能しません。

4

4 に答える 4

102

ng-repeat-start/ng-repeat-end を許可する新しい機能が Angular 1.2 で追加されました。

この機能を使用すると、次のように html を記述できます。

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

完全な動作例については、この plnkrを参照してください。

于 2013-05-29T08:06:43.550 に答える
9

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

<dl repeat-inside="word in dictionary">
    <dt>{{word.name}}</dt>
    <dd>{{word.definition}}</dd>
</dl>
于 2013-07-20T21:42:02.697 に答える