Angular.js: ngRepeat with DL / DD / DT

두 번째 이것. 나는 잠시 동안이 문제가 발생했습니다.

@IgorMinar 는 주석 기반 ng-repeat(https://github.com/angular/angular.js/pull/1646)에 대해 일부 작업을 수행했지만 주석이 모든 브라우저에서 잘 재생되지 않기 때문에 그럴 가능성은 없습니다. 병합. 대신 그들은 "시작 및 종료 반복 태그" 또는 "시작-반복 및 레이블을 반복할 요소 수"가 있는 대체 솔루션을 찾고 있습니다.

{{ }}와 같은 쌍 안에 템플릿을 허용하는 것은 어떻습니까?

아마도:
{{! ng-repeat = "foo in l"

관련 메모에서 두 번째 보간 형식에 큰 기술적 문제가 가 있습니다.
html 문자를 이스케이프하지 않았지만 생성하지도 않은 {{{ }}}와 같이
새로운 스팬?

2013년 1월 29일 화요일 오후 12시 38분, Pete Bacon Darwin <
[email protected]>은 다음과 같이 썼습니다.

@IgorMinar https://github.com/IgorMinar 는 작업을 수행했습니다.
주석 기반 ng-repeat (#1646https://github.com/angular/angular.js/issues/1646)
그러나 주석이 모든 브라우저에서 잘 재생되지 않기 때문에
병합됩니다. 대신 그들은 대체 솔루션을 찾고 있습니다. 아마도
"시작 및 종료 반복 태그" 또는 "시작-반복 및 수
레이블을 반복할 요소"

—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -12856484에서 확인하세요.

방금 배열의 개체당 두 개의 'td' 요소를 생성하려는 테이블에서 이 문제가 발생했습니다.

이 기능을 추가하면 +1입니다. 방금이 동일한 제한에 부딪쳤습니다.

:엄지손가락:

동일한 문제가 있습니다. "ng-repeat-children"이 현재 요소가 아닌 자식만 반복하거나 "ng-omit-tag"(현재 태그를 제거하지만 자식을 제자리에 남겨둠)와 같은 것을 사용하고 싶습니다. ng-repeat와 함께합니다. 이렇게 하면 이 문제를 해결하기 위해 생성된 수많은 잘못된 마크업을 피할 수 있습니다.

논의 중인 제한 사항을 완전히 이해하지 마십시오. 부모 요소에 ng-repeat를 두는 것이 작동하는 이유는 무엇입니까? http://jsfiddle.net/JyWdT/13/
누군가가 문제를 더 자세히 설명하는 바이올린을 만들 수 있습니까?

lgalfaso, 귀하의 바이올린은 각각 하나의 정의로 여러 정의 목록을 만듭니다. 원하는 출력은 여러 정의가 있는 하나의 정의 목록입니다.

또는 제 경우에는 배열의 모든 항목에 대해 "td" 요소 쌍을 만들어야 합니다.
배열이 있다고 가정해 보겠습니다.

[{name:dan, age:15}, {name:steve, age:21}]

출력해야 합니다.

<tr><td>dan</td><td>15</td><td>steve</td><td>21</td></tr>

현재로서는 Angular를 사용하여 이를 수행할 수 있는 방법이 없습니다.

tr 요소에 ng-repeat를 넣어 그렇게 할 수 없습니까?

http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE?p=preview

2013년 4월 21일 일요일 오후 2시 24분에 ziles [email protected]에서 다음과 같이 썼습니다.

lgalfaso, 귀하의 바이올린은 각각 하나의 정의 목록을 여러 개 만듭니다.
정의. 원하는 출력은 여러 개의 정의 목록이 있는 하나의 정의 목록입니다.
정의.

또는 제 경우에는 모든 항목에 대해 한 쌍의 "td" 요소를 만들어야 합니다.
배열.
배열이 있다고 가정해 보겠습니다.

[{ 이름:단 , 나이:15 }, { 이름:스티브 , 나이:21 }]

출력해야 합니다.

단15스티브21

현재로서는 Angular를 사용하여 이를 수행할 수 있는 방법이 없습니다.

—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -16716788에서 확인하세요.
.

아, 알겠습니다. 이전 댓글은 무시하세요.
2013년 4월 21일 오전 9:09 "jason turim" jason. [email protected] 은 다음

tr 요소에 ng-repeat를 넣어 그렇게 할 수 없습니까?

http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE?p=preview

2013년 4월 21일 일요일 오후 2시 24분에 ziles [email protected]에서 다음과 같이 썼습니다.

lgalfaso, 귀하의 바이올린은 각각 하나의 정의 목록을 여러 개 만듭니다.
정의. 원하는 출력은 여러 개의 정의 목록이 있는 하나의 정의 목록입니다.
정의.

또는 제 경우에는 모든 항목에 대해 한 쌍의 "td" 요소를 만들어야 합니다.
배열.
배열이 있다고 가정해 보겠습니다.

[{ 이름:단 , 나이:15 }, { 이름:스티브 , 나이:21 }]

출력해야 합니다.

단15스티브21

현재로서는 Angular를 사용하여 이를 수행할 수 있는 방법이 없습니다.

—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -16716788에서 확인하세요.
.

방금 dl / dt + dd 문제가 발생하여 새로운 ng-repeat-children(또는 ng-repeat-inner)이 누락된 필수 지시어임을 확인했습니다.

+1

새로운 지시문 ng-repeat-inner에 대한 제안. 이 제안이 괜찮다면 모든 가이드를 수정합니다.

동일한 ng-repeat 지시문을 사용하는 것이 더 나을 것이라고 생각하지만 원래 게시물에서 제안하는 것처럼 HTML 주석에 해당 지시문을 사용할 수 있도록 허용합니다.

다음과 같은 것이 작동해야 합니다.

<dl>
  <!-- ng-repeat="(name, definition) in myList" -->
  <dt>{{name}}</dt>
  <dd>{{definition}}</dd>
  <!-- /ng-repeat -->
</dl>

반복되는 블록의 시작과 끝이 정확히 어떻게 달성되는지는 확실하지 않지만( @ProLoser에서 <!-- /ng-repeat --> 제안), HTML 주석을 사용하는 것이 우아한 솔루션이 될 것이라고 생각합니다.

축소자가 주석 및 주석과 관련된 기타 문제를 제거할 수 있다는 점을 감안할 때 저는
이것이 훌륭하다고 생각하지 마십시오. 그러나 나는 ng-repeat를 사용하는 아이디어를 좋아합니다.
ng-repeat-single-root 속성을 포함하는 것이 가능합니까?
true로 설정하면 루트 없이 ng-repeat가 실행됩니다.
요소? 예를 들어:

{NS}

{NS}

될 것입니다:

1

1

2

2

삼

삼

2013년 4월 23일 화요일 오후 3시 54분, Mani Tadayon [email protected]작성 :

동일한 ng-repeat 지시문을 사용하는 것이 더 좋을 것이라고 생각하지만 허용
해당 지시문이 원본 게시물로 HTML 주석에 사용되도록
제안.

다음과 같은 것이 작동해야 합니다.

{{이름}}

{{정의}}

블록의 시작과 끝이 정확히 어떻게 반복되는지 확실하지 않음
달성 될 것입니다 (나는내 예에서),
그러나 HTML 주석을 사용하는 것이 우아한 해결책이 될 것이라고 생각합니다.

—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -16891970에서 확인하세요.
.

maxcan, 소스 html을 유효하게 유지하기 때문에 "단일 루트"의 장점을 볼 수 있지만 해당 구성을 사용하면 "dl" 태그 안에 다른 것을 추가할 수 없습니다... 예를 들어 원하는 고정 정의 동적 정의 루프 앞에 포함합니다. lgalfaso의 솔루션이 이를 처리합니다.

@maxcan 은 큰 재작업이나 성능 저하 없이 이 속성을 추가할 수 있다고 생각하지 않습니다. 합리적인 것은 이 속성에 대한 변경으로 인해 재컴파일이 발생할 가능성이 높다는 것입니다. [그리고 아무도 재컴파일을 좋아하지 않습니다]

나는 @bowsersenior 의 제안을 좋아하지만 이것을 닫는 코멘트로 선호합니다: <!-- /ng-repeat -->

흥행에 부끄러운 일이다. 아무튼 강력하게 지지합니다
@lgalfaso 의 솔루션, 지시문을 div에 넣을 수 있다고 가정하고
그냥 댓글..

2013년 4월 24일 수요일 오후 1시 58분에 Dean Sofer [email protected]이 다음과 같이 작성했습니다.

@bowsersenior https://github.com/bowsersenior 의 제안을 좋아하지만
나는 이것을 닫는 코멘트로 선호합니다:

—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -16964155에서 확인하세요.
.

나는 <!-- /ng-repeat --> 가 HTML 주석 접근 방식에서 더 나은 닫는 태그라는 @ProLoser 와 동의합니다. 참고로 angular는 HTML 주석에서 지시문을 정의할 수 있도록 하므로 HTML 주석을 이 문제에 대한 잠재적인 솔루션으로 폐기할 수는 없다고 생각합니다. 핵심 Angular 개발자는 이 스택 오버플로 질문(원래 포스터에서 지적한 대로)에서 이 문제를 해결하기 위해 HTML 주석을 사용할 계획임을 표시했습니다.

• http://stackoverflow.com/a/10458127/457819

나는 이것을하지 않고 이것을 할 수있는 방법이있는 한 그것들을 버리는 것을 신경 쓰지 않습니다.
코멘트.

2013년 4월 24일 수요일 오후 2시 41분, Mani Tadayon [email protected] 작성 :

나는 @ProLoser https://github.com/ProLoser에 동의합니다. HTML 주석 접근 방식에서 더 나은 닫는 태그입니다. 하나
참고, 각도를 사용하면 HTML 주석에서 지시문을 정의할 수 있으므로
HTML 주석이 이에 대한 잠재적인 솔루션으로 폐기될 수 있다고 생각합니다.
문제. 핵심 Angular 개발자는 다음과 같이 표시했습니다.
이 스택 오버플로에서 이 문제를 해결하기 위해 HTML 주석을 사용할 계획입니다.
질문(원래 포스터에서 지적한 대로):

• http://stackoverflow.com/a/10458127/457819

—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -16969268에서 확인하세요.
.

@lgalfaso 의 ng-repeat-inner에 +1. 나는 마침내 이것을 끝내는 무언가를 원한다.

녹아웃은 주석으로 이를 수행합니다. 녹아웃에서 dl 태그로 수행한 작업을 이식하려고 하는데 이 문제가 해결될 때까지 불가능한 것 같습니다.

이것은 내 의견이므로 @mhevery 또는 @IgorMinar 의 입력 없이 소금 한
주석으로 ng-repeat 작업을 수행하는 것이 더 유연하다는 것을 알았습니다. 어쨌든 $compiler를 변경하지 않으면 자연스러워 보이지 않으므로 "주석 사이" 유형의 지시문을 처리할 수 있습니다. 그 이유는 지시문이 주어진 것을 수행하기 위해 주어진 요소의 외부를 중첩하고 살펴보는 데 주의를 기울여야 하는 것이 이상해 보이기 때문입니다.

댓글/댓글 없음이 계속되는 논란의 원인이라면 둘 다 가질 수는 없나요? 이렇게 흔한 문제가 3개월 이상 해결되지 않았다는 사실을 이해하기 어렵습니다. 그 이유가 주로 구현에 대한 논란으로 인한 것이라면, 더 "최적"인 것을 아무 것도 없이 더 오래 기다리는 것보다 실제로 구현(그리고 아마도 업데이트/추가)하는 것이 더 나은 것 같습니다.

그러나 대부분의 경우 ng-repeat-inner가 특정 항목 "내에서" 일련의 요소를 반복하는 것을 의미하는 경우 대부분의 경우 이미 일종의 독점 외부 컨테이너를 생성했음을 의미합니다. 따라서 주석 구현이 더 다재다능할 수 있지만(가능하면 피하고 싶은 추가 1/2줄의 코드일지라도) 요소 내 지시문.

HTML 주석 사용 여부의 문제는 이 문제가 몇 달 동안 미해결 상태였다는 사실과 관련이 없습니다. 문제를 결정하고 솔루션을 구현하기 위해 Angular 유지 관리자의 주의가 필요하다고 생각합니다.

놓친 경우 주석 기반 반복기의 문제에 대해서는 https://github.com/angular/angular.js/pull/1646을 참조하세요. @lgalfaso 솔루션은 이 시점에서 훨씬 더 유망합니다.

지적해주셔서 감사합니다 #1646 . @mhevery의 토론 에 코드를 표시하지 않고 "더 나은 방법"을 제안

"더 나은 방법"이 무엇인지 알았으면 좋겠습니다!

핵심 팀의 합의는 현재 이 문제에 접근하는 가장 좋은 방법은 다음 중 하나라는 것입니다.

이 모든 예제에는 2개의 td 태그가 포함되어 있습니다. 나는 repeater가 임의의 수의 요소에 대해 반복을 허용해야 한다는 것을 보여주고 싶었기 때문에 불법이지만 의도적으로 이 작업을 수행 했습니다. 이 예제를 테이블을 사용하도록 변환하는 것이 좋습니다. 및 테이블 행, 하지만 지금은 오프라인 상태가 되려고 하므로 리팩토링할 시간이 없습니다.

구문 A:

<dl>
  <dt ng-repeat="(name, definition) in myList">{{name}}</dt>
  <dd ng-repeat-next>{{definition}}</dd>
  <dd ng-repeat-next>{{definition}}</dd>
</dl>

구문 B:

<dl>
  <dt ng-repeat-start="(name, definition) in myList">{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

구문 C:

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-start>{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

구문 D:

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-group>{{name}}</dt>
  <dd ng-repeat-group>{{definition}}</dd>
  <dd ng-repeat-group>{{definition}}</dd>
</dl>

장기적으로 브라우저 지원이 개선되면 새로운 <template> 요소를 사용하여 간단히 다음을 수행할 수 있습니다.

구문 X:

<template>
  <dl>
    <ng repeat="(name, definition) in myList">
      <dt>{{name}}</dt>
      <dd>{{definition}}</dd>
      <dd>{{definition}}</dd>
    </ng>
  </dl>
</template>

이 솔루션에 대한 PR을 작성하려는 사람이 있으면 병합됩니다. 또한 특정 구문에 대한 선호 사항이 있으면 말씀해 주십시오.

입력해 주셔서 감사합니다. 내 관점에서 구문 A는 다음과 같은 중첩 루프에 대해 명확하지 않습니다.

<dl>
  <dt ng-repeat="...">loop 1</dt>
  <dt ng-repeat="..." ng-repeat-next>loop 2</dt>
  <dd ng-repeat-next>is this within loop 2 or only loop 1</dd>
</dl>

구문 B와 C는 거의 동일합니다. 저는 두 가지 대안을 모두 좋아합니다(심지어 구문 B가 더 낫다고 생각하더라도)

내가 뭔가를 놓치고 있지 않다면 구문 D에는 구문 A와 동일한 중첩 루프 문제가 있습니다.

순전히 최소한의 편지를 써야하기 때문에 가능하면 B로 갈 것입니다. 또한 가장 대칭적으로 보입니다. 시각적 대칭으로 인해 관리하기가 가장 쉬울 것 같습니다.

lgalfasos의 의견은 흥미로운 딜레마를 지적합니다. 그의 예에서 중첩 루프가 두 번째가 아닌 첫 번째 요소에 있으면 어떻게 될까요? 그런 다음 내가 누락된 것이 없는 한 모든 버전의 구문이 이제 불분명합니다.

<template> 래핑에도 불구하고 @lgalfaso 가 제안한 ng-repeat-inner 와 구문 X의 ng repeat 사이의 차이점을 잘 이해하지 못합니다. 누군가 설명해 주시겠습니까?

나도 그것을 이해하고 있는지 확실하지 않지만 <ng> 태그가 DOM의 일부가 되지 않아 dl 아래의 잘못된 중첩 구조를 피할 수 있다고 생각합니다.

제안된 구문에 대해서는 B에 투표하겠습니다.

X의 경우 구문이 DOM의 일부가 아니며 다양한 지시문을 호스트할 수 있는 일반 더미 래퍼 요소 <ng> 를 허용한다고 생각합니다. 이것은보다 일반적인입니다 ng-repeat-inner 에만 특정 사용 케이스에 적용되는, ng-repeat .

구문 X 경우, 장기 목표는, 단지 더 일반적인 버전입니다 ng-repeat-inner , 내가 느끼는 그 ng-repeat-inner 도 (* 전적으로되지 않음) 제안 된 A, B 중 하나를 따라 채택되어야한다, 다음에 대한 C,D:

1. 구문 X와 ng-repeat-inner 는 모두 동일한 dom 구조를 갖습니다.
   : 구문 X가 장기적인 목표라면 향후 리팩토링을 방지하기 위해 유사하게 구조적으로 정렬되는 무언가를 갖는 것이 좋을 것입니다.
2. 대부분의 경우 ng-repeat-inner 이면 충분합니다.
   : 의도는 내부 요소를 반복하는 외부 컨테이너를 만드는 것입니다.

@ daegon123 @IgorMinar의 나열 구문 (포함 X)과의 차이 ng-repeat-inner 신택스는 임의로 별개의 용기없이 요소의 집합을 반복 할 수 있다는 것입니다. 예를 들어 table 또는 tbody 반복되지 않는 다른 <tr> 가 있는 동안 <tr> 세트를 반복합니다. 이 경우 반복할 요소에는 ng-repeat-inner 를 바인딩할 고유한 부모가 없습니다.

<table>
    <thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

또는 <dl> 개체당 여러 정의

<dl>
    <dt ng-repeat-start="...">{{item.term1}}</dt>
    <dd>{{item.def1}}</dd>
    <dt>{{item.term2}}</dt>
    <dd>{{item.def2}}</dd>
    <dt>{{item.term3}}</dt>
    <dd ng-repeat-end>{{item.def3}}</dd>
</dl>

@es128 댓글과 코드 감사합니다. 이것이 바로 내가 ng-repeat-inner 나열된 다른 구문 중 하나와 함께 '허용'하도록 제안한 이유입니다. 그러나 귀하의 주석에서 실제 코드를 보고 ng-repeat-inner 가 필요한지 궁금해지기 시작했습니다. 내가 뭔가를 발견하면 또 다른 의견을 게시할 것입니다 - 다시 감사합니다!

ng-repeat-inner의 문제는 모든 경우에 사용할 수 없다는 것입니다. 예를 들면 다음과 같습니다.

<ul>
  <li>some static prefix item</li>
  <!-- repeat these nodes -->
    <li>{{ something }}</li>
    <li>{{ something else }}</li>
  <!-- repeat end -->
  <li>some static postfix item</li>
</ul>

인위적인 요소(div와 같은)를 ul(html 사양에 따라)에 넣을 수 없기 때문에 ng-repeat-inner는 여기에서 사용할 수 없습니다.

btw 템플릿 요소를 사용하면 ul과 li 사이에 인공 요소를 넣을 수 있습니다.

또한 구문 X에 너무 집착하지 마십시오. 우리가 궁극적으로 정확한 구문을 수행할 수 있는 것에 대한 빠르고 더러운 예일 뿐이지만 아직 논의 중이지만 여기에 또 다른 것이 있습니다. 하나:

구문 Y:

<ul>
  <li>some static prefix item</li>
  <template repeat="item in items">
    <li>{{ item.name }}</li>
    <li>{{ item.owner }}</li>
  </template>
  <li>some static postfix item</li>
</ul>

ng-repeat 그룹에 id를 설정하는 것은 어떻습니까?
그런 다음 모든 수준에서 항목을 자유롭게 첨부할 수 있습니다. 같은 것

<dl>
    <dt ng-repeat="item in items" ng-repeat-group="someId">{{item.term}}</dt>
    <dd ng-repeat-with="someId">{{item.definition}}</dd>
</dl>

우리가 필요로 하는 유연성을 허용할 수 있습니다.

구문 C의 제안된 구현은 이것이 다른 요소 및 지시문에 대해 이와 동일한 메커니즘을 쉽게 허용하는 구문이라고 생각합니다.

잘했어 루카스! 나는 구문 C를 구현하기 위해 저녁을 보냈습니다. 제대로 작동하지만 모든 ng-repeat 를 주석으로 바꾸는 transclusion으로 인해 중첩이 지원되지 않습니다.

ng-repeat-start 찾는 DOM을 가로지르지 못하면 매칭을 위한 ng-repeat-end 속성의 깊이를 계산할 수 없습니다. 당신의 접근 방식이 문제를 해결하는 것 같습니다 ...

흠... 뭔가 잘못된 것 같습니다. 커밋에 문서가 누락되었으므로 올바른 구문을 사용하고 있지 않을 수 있습니다.

이것에 대해 살펴보십시오.
http://plnkr.co/edit/sVilxKaNrhNM4JrkuQ5r?p=preview

중첩되지 않은 경우의 출력은 다음과 같을 것으로 예상했습니다.

Term: elastic
     Static term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
     This definition should be repeated for every term: 'par' term

그리고 중첩된 것의 경우:

Term: elastic
     Static term
Subterm: superelastic
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'elastic' term
Subterm: subelastic
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'elastic' term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
Subterm: superpar
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'par' term
Subterm: subpar
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'par' term
     This definition should be repeated for every term: 'par' term

내가 뭔가를 놓치고 있습니까?

@lrlopez 당신이 넣은 예제는 최신 버전의 코드를 사용하지 않습니다. 또한 23행에 추가 </dl> 가 있습니다.

빠른 답변 감사합니다! 맞습니다. 23행에 </dl> 가 추가로 있었습니다. 라이브러리도 업데이트했습니다. 그럼에도 불구하고 나는 여전히 중첩 된 예제를 사용할 수 없습니다 ...

좋습니다. DOM에서 동일한 수준에 있는 다중 요소 지시문에 대한 실제 문제인 것 같습니다. 이 문제에 대한 수정 사항으로 PR을 업데이트했습니다.

ng-repeat-inner 또는 ng-repeat-next와 같은 수정 사항은 실제 DOM 노드에 바인딩 동작이 제한되는 수많은 상황 중 하나만 해결합니다.

모든 지시문을 개별적으로 패치하는 대신 실제 트리에서 렌더링되지 않는 가상 노드에 대한 지원을 추가하여 전체 프레임워크에 대해 이 문제를 해결할 수 있습니다.

주석을 사용하는 아이디어는 비슷하지만 보기 흉하고 읽기 어려운 코드가 되고 여전히 해당 노드의 이름을 지정하고 어떻게든 닫을 방법이 필요합니다. 새로운 주석 노드 구문을 발명하는 대신 기존 HTML 구문을 사용하십시오.

SASS 자동 클래스와 유사한 개념으로 생각하십시오.

<div id="myComplexList">
    <ng-virtual ng-repeat="...">
        <a></a>
        <b></b>
        <c></c>
    </ng-virtual>
</div>

Result:

<div id="myComplexList">
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    ...
</div>

일반적인 아이디어에 +1하지만 ng-repeat-group과 같은 것을 선택합니다.

<ng-repeat-group="b in ches">
// group markup to be repeated here
</ng-repeat-group>

나는 가상 노드의 아이디어를 좋아하지만 여기서 문제에 대한 일반적인 솔루션이 되는 것에 반대합니다.

가능하다면 인공 용기의 생성을 제한하고 싶습니다. 전체 결과의 html에 컨테이너가 표시되지 않을 수 있지만 관리가 필요한 html 코드가 복잡해지기 시작할 것입니다.

많은 경우 반복하고 싶은 내용을 담을 컨테이너가 필요합니다. 전:

<tr>
  <td ng-repeat-start>1</td>
  <td ng-repeat-end>2</td>
</tr>

(여기서 컨테이너는 [tr]임)

제안된 가상 노드 솔루션을 사용하면 다음과 같이 바뀝니다.

<tr>
  <ng-virtual ng-repeat="...">
     <td>1</td>
     <td>2</td>
  </ng-virtual>
</tr>

중복 컨테이너 만들기: 이 두 줄 추가조차도 코드가 더 길어지면 어떨지 생각하는 것이 불편합니다.

또 다른 문제는 코드가 현재 어느 수준의 dom에 있는지 파악하는 것이 지루해지기 시작한다는 것입니다.
다음은 @es128 의 코드입니다.

<table>
<thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

가상 노드를 사용하면 다음과 같이 바뀝니다.

<table>
<thead>...</thead>
    <ng-virtual ng-repeat="...">
        <tr">...</tr>
        <tr>...</tr>
        <tr>...</tr>
    </ng-virtual>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

처음 3개의 tr과 마지막 tr의 반복은 같은 수준에 있지만 코드를 간단히 훑어보면 서로 다른 수준으로 오인할 가능성이 있습니다. 그렇지 않으면 나 자신을 찾기 시작할 것입니다. 코드가 작업 중인 수준을 지루하게 계산(아마도 잘못되었을 수 있음), 특히 이러한 항목이 중첩되기 시작하는 경우.

다음은 내가 좋아하는 특정 버전의 구문입니다(B 종류).

<ul>
  <li>some static prefix item</li>
  <li ng-repeat-block="(name, definition) in myList">{{ something }}</li>
  <li>{{ something else }}</li>
  <li ng-repeat-block-close>{{ something else }}</li>
  <li>some static postfix item</li>
</ul>

@stanvass 귀하의 제안은 @IgorMinar 가 구문 X로 게시한 것의 변형입니다. 주요 문제는 브라우저 지원이 거기에 없다는 것입니다.

하나의 내부 요소만 반복하려는 경우 ng-repeat-start 및 ng-repeat-end 를 모두 갖는 것이 중복된다는 것을 방금 깨달았습니다.

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

이것을 방지하는 ng-repeat-single 있으면 좋을 것입니다. 전.

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

@daegon123 단일 요소를 반복하려면 다음을 수행하십시오.

<tr>
  <td ng-repeat="...">repeat this</td>
</tr>

ng-repeat-start 또는 ng- repeat-end

@lgalfaso 감사합니다. 제안된 구문에 너무

이 문제는 단순히 한 요소를 반복하는 문제가 아니라고 생각합니다. 부모를 반복하지 않고 요소 집합을 반복하는 방법에 대한 자세한 내용입니다. 즉 <dt>..<dd>... - 하지만 여기에는 다른 좋은 예가 많이 있습니다.

구문 X는 반복 중첩을 시작하면 잘 정의된 유일한 구문입니다. Syntax AD에서 다음을 작성하는 방법은 다음과 같습니다.

<template>
  <dl>
    <ng repeat="book in myList">
      <dt ng-repeat="author in book.authors">{{author.name}}</dt>
      <dd>{{book.title}}</dd>
      <dd>{{book.description}}</dd>
    </ng>
  </dl>
</template>

더 나은 제안입니다.
My Blackberry®에서 보낸

------원문-----
보낸 사람: daegon123 [email protected]
날짜: 2013년 5월 6일 월요일 22:57:16
받는 사람: angular/angular.jsangular. [email protected]
답장: "angular/angular.js" [email protected]
제목: Re: [angular.js] ngRepeat with DL / DD / DT (#1891)

하나의 내부 요소만 반복하려는 경우 ng-repeat-start 및 ng-repeat-end 를 모두 갖는 것이 중복된다는 것을 방금 깨달았습니다.

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

이것을 방지하는 ng-repeat-single 있으면 좋을 것입니다. 전.

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/angular/angular.js/issues/1891#issuecomment -17524685

+1, 이것은 큰 한계입니다.

:+1: 이에 대한 솔루션을 기대합니다! 지금은 <li> 를 사용하려고 하지만 이에 대한 솔루션을 제공하는 angular가 나올 때 해당 마크업을 리팩터링하고 싶습니다.

#2783이 이 문제를 해결할까요?

예. 방금 도착한 솔루션이 있습니다. e46100f7097d9a8f174bdb9e15d4c6098395c3f2

이 문제를 닫습니다.

이 간단한 예에서 <TypeError: Object #<Text> has no method 'hasAttribute'> 오류가 발생했습니다.

<table>
        <tr ng-repeat-start="value in [1,2,3,4]">I get repeated</tr>
        <tr ng-repeat-end>I also get repeated</tr>
    </table>

또한 문제를 gevgeny 상태로 가져옵니다.
'hasAttribute' 메서드가 없습니다>

<tr>
                <td data-ng-repeat-start="column in selectedItem.Beds" class="text-center">Avail. Beds</td>
                <td data-ng-repeat-end>Extra Bed Spaces</td>
</tr>

@kharnt0x 이 puul 요청을 참조하십시오 https://github.com/angular/angular.js/pull/2859

#2783은 이것을 어떻게 해결할까요?

{[{h: "1",
   o: [{h: "1.1",
        o: [{h: "1.1.1"},
            {h: "1.1.2"},
            {h: "1.1.3"}]},
       {h: "1.2",
        o: [{h: "1.2.1"},
            {h: "1.2.2"},
            {h: "1.2.3"}]},

....

다음과 같이 출력해야 합니다.

<h1>1</h1>
<h2>1.1</h2>
<h3>1.1.1</h3>
<h3>1.1.2</h3>
<h3>1.1.3</h3>
<h2>1.2</h2>
<h3>1.2.1</h3>
<h3>1.2.2</h3>
<h3>1.2.3</h3> 

구문은 무엇입니까?

@ChrisCinelli hgroup 사용해 보세요

<h1>1</h1>
<hgroup>
    <h2>1.1</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
    <h2>1.2</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
<hgroup>

따라서 hgroup은 HTML5( http://html5doctor.com/the-hgroup-element/ )에서 제거된 것 같습니다. 그 외에도 문제가 더 복잡하고 헤더 태그가 예를 들어 사용되었다고 말했기 때문입니다.
이것은 분명히 허용되어야 하며 Angular의 선언적 뷰 철학을 전혀 위반하지 않는 사용 사례입니다...

찾고 있는 특정 출력에 대해 CSS를 고려했습니까?
카운터?

보다:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
http://css-tricks.com/almanac/properties/c/counter-increment/

2013년 6월 18일 화요일 오후 2시 46분에 Chris Cinelli [email protected]이 작성했습니다 .

따라서 hgroup이 HTML5에서 제거된 것 같습니다(
http://html5doctor.com/the-hgroup-element/ ) 그 옆에 내가 그랬듯이
문제가 더 복잡하고 헤더 태그가
예시.
이것은 분명히 허용되어야 하고 다음에서 중단되지 않는 사용 사례입니다.
Angular의 모든 선언적 뷰 철학...

—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -19644594에서 확인하세요.
.

명확하게 하기 위해 헤더를 예로 사용했습니다... 실제로는 데이터 구조의 각 수준에 대해 구조가 다른 비교적 복잡한 <div> 이 있습니다.

지금까지 내가 찾은 유일한 솔루션은 Javascript의 데이터 구조를 선형화하고 다른 수준에 대해 ng-switch를 사용하는 것이며 추가 div 수준이 필요합니다.
이 솔루션에는 오버헤드(즉, 데이터 구조를 선형화하기 위한 메모리 및 CPU)가 있으며 HTML은 내가 대신 사용할 수 있는 밑줄 템플릿보다 훨씬 덜 명확하게 보일 것입니다...

각 레벨에 대한 지시를 내릴 수 있습니까? 어떤 종류인지 잘 모르겠어
당신이 여기에서 말하는 구조, 그래서 나는 단지 빨대를 잡고 있을 것입니다.
그러나 내 경험상 ng-switch는 다음과 같은 경우 거의 필요하지 않습니다.
지시문 및 ng-include에 대한 액세스 및 스파게티 코드 템플릿으로 이어집니다.

2013년 6월 18일 화요일 오후 4시 27분에 Chris Cinelli [email protected]이 작성했습니다 .

나는 그것을 명확하게하기 위해 헤더를 예로 사용했습니다 ... 실제로는
각 레벨에 대해 다른 구조를 가진 비교적 복잡한 div
데이터 구조.

지금까지 내가 찾은 유일한 솔루션은 다음에서 트리를 선형화하는 것입니다.
Javascript를 사용하고 다양한 수준에 대해 ng-switch를 사용합니다.
이 솔루션에는 오버헤드가 있습니다(예: 데이터를 선형화하기 위한 메모리 및 CPU
구조) 및 HTML은
대신 사용할 수 있는 밑줄 템플릿...

—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -19650391에서 확인하세요.
.

다음과 같습니다. http://d.pr/i/GSX4
거의 짧은 레이블(1.xx x), 설명, 확인 표시의 수 등은 db에서 가져옵니다.
이 부분을 Angular로 변환하는 옵션을 탐색 중이지만 지금까지는 주사위가 없습니다.

현재 보기는 상당히 논리적이지 않으며 현재 진행 중인 상황을 비교적 명확하게 보여줍니다.
내가 잘 이해한다면 자바 스크립트의 모든 수준을 깨야한다고 제안하는 것입니다.

나에게 이것은 더 지저분하고 덜 응집되고 덜 읽기 쉬워 보입니다. 이 패널을 표시하기 위한 모든 정보가 있는 데이터 구조가 주어지면 논리가 완전히 보기와 관련되고 이 보기와 매우 구체적일 때 다른 파일(모듈/컨트롤러)의 코드를 사용해야 하는 이유는 무엇입니까? IMHO, 컨트롤러는 다음과 같아야 합니다(현재 구현 중입니다).

• 모델에서 데이터 가져오기
• 프레임워크가 렌더링할 수 있도록 모델을 뷰에 전달

물론 몇 가지 추가 div를 추가하고 CSS를 변경할 수 있지만, 이것이 Angular와 함께 작동하도록 하는 데 필요한 경우 Angular가 여기에서 작업을 완료하는 것이 얼마나 편리하고 우아한지 방해가 된다고 느낍니다.

나는 KnockoutJS에서 데이터 바인딩을 찾았는데, 이는 html 요소 <div data-bind="foreach: ..."> 뿐만 아니라 "컨테이너 없는 제어 흐름 구문", <!-- ko foreach: ... --><!-- /ko --> 에 대한 두 바인딩이 모두 매우 유용할 수 있으며 다음과 같은 경우에 좋을 것이라고 생각합니다. Angular는 @bowsersenior가 제안한 구문과 매우 유사한 구문 옵션 세트를 지원할 수 있습니다.

Knockout의 "컨테이너리스" 옵션에 대한 자세한 내용은 다음을 참조하세요.
http://knockoutjs.com/documentation/foreach-binding.html

@mg1075 가상 구문의 경우 +1입니다.
KnockoutJS를 사용하면 dd 및 중첩 컬렉션을 더 쉽게 처리할 수 있습니다.
예: http://stackoverflow.com/questions/20062032/nested-table-using-ng-repeat