반응형
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
반응형
'programing' 카테고리의 다른 글
배열에서 Null을 필터링하여 제외합니다. (0) | 2023.02.23 |
---|---|
사이트의 다른 페이지로 WooCommerce 'Shop' 페이지 전달 (0) | 2023.02.23 |
최대 업로드 파일 크기 증가 WordPress 다중 사이트 (0) | 2023.02.23 |
리액트 프로젝트에서 dotenv를 사용할 수 있습니까? (0) | 2023.02.23 |
React Select 컴포넌트 테스트 (0) | 2023.02.23 |