AngularJS를 사용하여 동적 정의 목록을 어떻게 렌더링합니까?

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>

동적 수의 dd와 정적 수의 dts에 대해 작동하지만 둘 다의 동적 수는 아닙니다.

---

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 을 참조하십시오 .

---

나는 이와 같은 문제를 해결하기 위해 repeatInside 라는 지시문을 만들었습니다 .

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

---

반복을하려면 일부 요소로 래핑해야하기 때문에 이것은 문제입니다. 그리고 그것은 유효한 html이 될 수 없습니다. 순서가 지정되지 않은 목록이나 테이블에서 동일한 문제에 봉착하게됩니다.

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

나는 추측 div내부는 dl사양에 의해 허용되지 않습니다, 그러나 그것은 작동합니다 - 적어도 크롬 - D에

이를 지원하기 위해 ng-repeat의견을 지원할 계획 입니다.

---

이 답변은 Angular v1.2.7에서 저에게 효과적이지 않은 것 같았으므로 저에게 잘 작동하는 약간의 변형을 게시하고 싶었습니다.

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

참고 URL : https://stackoverflow.com/questions/10457833/how-would-i-render-a-dynamic-definition-list-using-angularjs