Jak mogę wyświetlić dynamiczną listę definicji przy użyciu AngularJS?

Question

Jak mogę renderować dynamiczną listę definicji przy użyciu AngularJS?

Przykład:

danych:

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

Pożądany HTML:

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

Przykładem na http://docs.angularjs.org/tutorial/step_08:

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

prace dla wielu dynamicznych DDS oraz static nu mber of dts, ale nie liczba dynamiczna obu.

Answer 1

Dodano nową cechę, która umożliwia ng-repeat-start/ng-repeat-end w Angular 1.2.

Dzięki tej funkcji można napisać html tak:

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

Zobacz this plnkr dla pełnego przykład roboczego.

Answer 2

Jest to problem, ponieważ trzeba owinąć go jakimś elementem, aby powtórzyć. I to nie będzie prawidłowy html - co można uzyskać w tym samym kłopoty z nieuporządkowanych list lub tabel ...

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

Chyba div wewnątrz dl nie jest dozwolone przez specyfikację, ale działa - przynajmniej w Chrome :-D

Planujemy wesprzeć ng-repeat wewnątrz komentarza, aby to wspierać.

Answer 3

Utworzono dyrektywę o nazwie repeatInside w celu rozwiązania problemów takich jak ten.

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

Answer 4

Ta odpowiedź nie wydaje się pracować dla mnie w Kątowymi v1.2.7 więc chciałem zakładać lekką odmianę, który pracował dobrze dla mnie:

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