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>

는 dds의 동적 수와 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 를 참조해 주세요.

'반복'이라는 명령을 만들어 놨어요이런 문제를 해결하기 위해 안으로 들어갔습니다.

<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사양에서는 허용되지 않지만 Chrome :-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