Angular.js: ngWiederholen mit DL / DD / DT

zweitens dies. Ich habe dieses Problem seit einiger Zeit.

@IgorMinar hat an einem kommentarbasierten ng-Repeat (https://github.com/angular/angular.js/pull/1646) gearbeitet, aber da Kommentare nicht auf allen Browsern so gut abgespielt werden, ist dies wahrscheinlich nicht der Fall zusammengeführt. Stattdessen suchen sie nach einer alternativen Lösung, wahrscheinlich mit "Start- und End-Wiederholungs-Tags" oder "Start-Wiederholung und Anzahl der Elemente zum Wiederholen des Labels".

Wie wäre es, Vorlagen in Paaren wie {{ }} zuzulassen?

kann sein:
{{! ng-repeat = "foo in l"

In diesem Zusammenhang habe ich ein ähnliches Problem mit Würde es große technische Herausforderungen für eine zweite Interpolationsform geben?
wie {{{ }}}, das keine HTML-Zeichen maskiert, aber auch kein a . erstellt hat
neue Spannweite?

Am Di, 29.01.2013 um 12:38 Uhr, Pete Bacon Darwin <
[email protected]> schrieb:

@IgorMinar https://github.com/IgorMinar hat etwas an einem gearbeitet
kommentarbasierte ng-Wiederholung (#1646https://github.com/angular/angular.js/issues/1646)
aber da Kommentare nicht auf allen Browsern so gut abgespielt werden, ist dies wahrscheinlich nicht der Fall
zusammengeführt werden. Stattdessen suchen sie wahrscheinlich nach einer alternativen Lösung
entweder mit "Start- und End-Wiederholungs-Tags" oder "Start-Wiederholung und Anzahl von
Elemente zum Wiederholen des Etiketts"

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/angular/angular.js/issues/1891#issuecomment -12856484.

Ich bin gerade auf dieses Problem mit einer Tabelle gestoßen, die zwei 'td'-Elemente pro Objekt in einem Array generieren möchte.

+1 für das Hinzufügen dieser Funktion. Bin gerade auf dieselbe Einschränkung gestoßen.

:Daumen hoch:

Selbes Problem hier. Ich würde gerne etwas wie "ng-repeat-children" sehen, das nur die Kinder, aber nicht das aktuelle Element wiederholt, oder eine Art "ng-omit-tag" (das das aktuelle Tag entfernt, aber die Kinder an Ort und Stelle lässt) verwendet werden zusammen mit ng-wiederholung. Dies würde Unmengen von ungültigem Markup vermeiden, das zur Umgehung dieses Problems generiert wird.

Verstehe die diskutierte Einschränkung nicht ganz. Warum funktioniert das Setzen von ng-repeat auf das übergeordnete Element? http://jsfiddle.net/JyWdT/13/
Kann jemand eine Geige erstellen, die das Problem genauer erklärt?

lgalfaso, Ihre Geige erstellt mehrere Definitionslisten mit jeweils einer Definition. Die gewünschte Ausgabe ist eine Definitionsliste mit mehreren Definitionen.

Oder in meinem Fall muss ich für jedes Element in einem Array ein Paar von "td" -Elementen erstellen.
Sag, ich habe ein Array,

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

und ich muss ausgeben:

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

Mit Angular lässt sich das derzeit nicht erreichen.

können Sie das nicht tun, indem Sie die ng-Wiederholung auf das tr-Element setzen?

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

Am Sonntag, den 21. April 2013 um 14:24 Uhr schrieb zilles [email protected] :

lgalfaso, Ihre Geige erstellt mehrere Definitionslisten mit jeweils einer
Definition. Die gewünschte Ausgabe ist eine Definitionsliste mit mehreren
Definitionen.

Oder in meinem Fall muss ich für jeden Artikel in ein Paar "td"-Elemente erstellen
eine Anordnung.
Sag, ich habe ein Array,

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

und ich muss ausgeben:

DanfünfzehnSteve21

Mit Angular lässt sich das derzeit nicht erreichen.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/angular/angular.js/issues/1891#issuecomment -16716788
.

Oh, ich verstehe, ignoriere meinen vorherigen Kommentar
Am 21. April 2013, 09:09 Uhr, "jason turim" jason. [email protected] schrieb:

können Sie das nicht tun, indem Sie die ng-Wiederholung auf das tr-Element setzen?

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

Am Sonntag, den 21. April 2013 um 14:24 Uhr schrieb zilles [email protected] :

lgalfaso, Ihre Geige erstellt mehrere Definitionslisten mit jeweils einer
Definition. Die gewünschte Ausgabe ist eine Definitionsliste mit mehreren
Definitionen.

Oder in meinem Fall muss ich für jeden Artikel in ein Paar "td"-Elemente erstellen
eine Anordnung.
Sag, ich habe ein Array,

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

und ich muss ausgeben:

DanfünfzehnSteve21

Mit Angular lässt sich das derzeit nicht erreichen.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/angular/angular.js/issues/1891#issuecomment -16716788
.

Da ich gerade auf das Problem dl / dt + dd stoße, bestätige ich, dass ein neues ng-repeat-children (oder ng-repeat-inner) eine fehlende zwingende Anweisung ist.

+1

Vorschlag für eine neue Richtlinie ng-repeat-inner. Wenn dieser Vorschlag in Ordnung ist, werden alle Anleitungen geändert

Ich denke, es wäre besser, dieselbe ng-repeat Direktive zu verwenden, aber die Verwendung dieser Direktive für HTML-Kommentare zuzulassen, wie der ursprüngliche Beitrag vorschlägt.

Dann sollte so etwas funktionieren:

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

Ich bin mir nicht sicher, wie der Anfang und das Ende des zu wiederholenden Blocks erreicht werden würde ( <!-- /ng-repeat --> wurde von @ProLoser vorgeschlagen), aber ich denke, dass die Verwendung von HTML-Kommentaren eine elegante Lösung wäre.

Da Minifier Kommentare und andere Probleme mit Kommentaren beseitigen können, kann ich
finde das nicht toll. Ich mag jedoch die Idee, ng-repeat zu verwenden.
wäre es möglich, ein Attribut ng-repeat-single-root einzufügen oder
etwas, das, wenn es auf true gesetzt ist, die ng-Wiederholung ohne die Wurzel ausführt
Element? Zum Beispiel:

{ich}

{ich}

würde werden:

1

1

2

2

3

3

Am Dienstag, 23. April 2013 um 15:54 Uhr schrieb Mani Tadayon [email protected] :

Ich denke, es wäre besser, dieselbe ng-repeat-Direktive zu verwenden, aber erlauben Sie
damit diese Direktive in HTML-Kommentaren als Originalbeitrag verwendet wird
schlägt vor.

Dann sollte so etwas funktionieren:

{{Name}}

{{Definition}}

Nicht sicher, wie Anfang und Ende des Blocks wiederholt werden sollen
erreicht werden würde (ich habe diein meinem Beispiel),
aber ich denke, dass die Verwendung von HTML-Kommentaren eine elegante Lösung wäre.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/angular/angular.js/issues/1891#issuecomment -16891970
.

maxcan, ich kann die Vorteile von "single-root" sehen, da Sie das Quell-HTML gültig halten, aber dieses Konstrukt lässt Sie nichts anderes in das "dl"-Tag einfügen ... Eine feste Definition zum Beispiel, die Sie wollen vor Ihrer Schleife dynamischer Definitionen einzuschließen. Die Lösung von lgalfaso würde damit umgehen.

@maxcan ohne große Überarbeitung oder Leistungseinbußen glaube ich nicht, dass es möglich ist, diese Eigenschaft ng-repeat-single-root hinzuzufügen (naja, fügen Sie sie hinzu und machen Sie sie basierend darauf dynamisch). Der Grund ist, dass eine Änderung dieser Eigenschaft sehr wahrscheinlich eine Neukompilierung verursachen würde [und niemand mag Neukompilierungen]

Ich mag den Vorschlag von @bowsersenior , aber ich bevorzuge diesen als abschließenden Kommentar: <!-- /ng-repeat -->

Schade um den Performance-Hit. Jedenfalls befürworte ich nachdrücklich
Lösung von @lgalfaso , vorausgesetzt, Sie können die Anweisung in ein div
nur ein Kommentar..

Am Mittwoch, 24. April 2013 um 13:58 Uhr schrieb Dean Sofer [email protected] :

Ich mag @bowsersenior https://github.com/bowsersenior 's Vorschlag, aber
Ich würde dies als Abschlusskommentar bevorzugen:

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/angular/angular.js/issues/1891#issuecomment -16964155
.

Ich stimme mit @ProLoser überein, dass <!-- /ng-repeat --> ein besseres schließendes Tag im HTML-Kommentaransatz ist. Eine Anmerkung: Angular erlaubt die Definition von Direktiven in HTML-Kommentaren, daher glaube ich nicht, dass HTML-Kommentare als mögliche Lösung für dieses Problem verworfen werden können. Denken Sie daran, dass die Core-Angular-Entwickler angegeben haben, dass sie beabsichtigten, HTML-Kommentare zu verwenden, um dieses Problem in dieser Stack-Überlauf-Frage zu beheben (wie vom Originalposter hervorgehoben):

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

Es macht mir nichts aus, sie wegzuwerfen, solange es eine Möglichkeit gibt, dies ohne zu tun
Kommentare.

Am Mittwoch, den 24. April 2013 um 14:41 Uhr schrieb Mani Tadayon [email protected] :

Ich stimme @ProLoser https://github.com/ProLoser zu, dass ist ein besseres schließendes Tag im HTML-Kommentaransatz. Einer
Beachten Sie, dass eckige Anweisungen in HTML-Kommentaren definiert werden können, also tue ich es nicht
denken, dass HTML-Kommentare als mögliche Lösung dafür verworfen werden können
Problem. Denken Sie daran, dass die Kern-Angular-Entwickler angegeben haben, dass sie
geplant, HTML-Kommentare zu verwenden, um dieses Problem in diesem Stapelüberlauf zu beheben
Frage (wie vom Originalposter aufgezeigt):

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

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/angular/angular.js/issues/1891#issuecomment -16969268
.

+1 für ng-repeat-inner von @lgalfaso . Ich möchte endlich etwas, das das einfach macht.

Knockout macht dies mit Kommentaren. Ich versuche, etwas zu portieren, was ich mit dem dl-Tag in Knockout getan habe, und es scheint, als wäre dies nicht möglich, bis dieses Problem behoben ist.

Dies ist meine Meinung, also ohne die Eingabe von @mhevery oder @IgorMinar , nehmen Sie dies mit einem Körnchen Salz.
Ich sehe, dass es flexibler ist, ng-repeat mit Kommentaren zu arbeiten. Ohne eine Änderung an $compiler sieht es nicht natürlich aus, damit es eine Direktive vom Typ "zwischen Kommentaren" verarbeiten kann. Der Grund dafür ist, dass es seltsam aussieht, dass eine Direktive sich um die Verschachtelung und den Blick außerhalb des Elements kümmern muss, das ihr gegeben wird, um das zu tun, was sie soll

Wenn Kommentare/keine Kommentare der Grund für eine anhaltende Kontroverse sind, können wir sie nicht einfach beide haben? Ich finde es schwer zu verstehen, dass ein so häufiges Problem seit mehr als 3 Monaten nicht angegangen wurde. Wenn der Grund dafür hauptsächlich in einer Kontroverse über die Implementierung liegt, scheint es vorzuziehen, etwas tatsächlich implementiert (und möglicherweise in Zukunft aktualisiert / hinzugefügt) zu haben, als länger mit nichts auf etwas "Optimaleres" zu warten.

In den meisten Fällen scheint es mir jedoch, dass, wenn ng-repeat-inner sich auf das Wiederholen einer Reihe von Elementen "innerhalb" eines bestimmten Etwas bezieht, dies impliziert, dass Sie in den meisten Fällen bereits einen exklusiven äußeren Container erstellt haben. Während eine Kommentarimplementierung vielseitiger sein könnte (wenn auch vielleicht eine zusätzliche 1/2-Zeilen Code, die ich nach Möglichkeit vermeiden möchte), denke ich, dass sie weniger verwendet wird (und vielleicht weniger priorisiert werden sollte) als eine Direktive im Element.

Die Frage, ob HTML-Kommentare verwendet werden sollen, hat nichts damit zu tun, dass diese Frage seit einigen Monaten offen ist. Ich denke, alles, was erforderlich ist, ist etwas Aufmerksamkeit der eckigen Betreuer, um das Problem zu lösen und eine Lösung zu implementieren.

Falls Sie es verpasst haben, finden Sie hier https://github.com/angular/angular.js/pull/1646 zu Problemen mit kommentierten Repeatern. Die Lösung von

Danke für den Hinweis auf #1646. In dieser Diskussion von @mhevery gibt es einen Kommentar, der "eine bessere Möglichkeit" vorschlägt, ohne Code anzuzeigen (wahrscheinlich ein Formatierungsfehler):

Ich wünschte, wir wüssten, was dieser "bessere Weg" ist!

Der Konsens im Kernteam ist, dass derzeit der beste Weg, dieses Problem anzugehen, einer der folgenden ist (wir haben uns noch nicht auf die Syntax festgelegt, aber die Implementierung ist für alle fast gleich):

Alle diese Beispiele enthalten zwei td Tags, ich habe dies absichtlich getan, obwohl es illegal ist, weil ich zeigen wollte, dass der Repeater das Wiederholen über eine beliebige Anzahl von Elementen zulassen sollte - es wäre besser, diese Beispiele in die Verwendung von Tabellen umzuwandeln und Tabellenzeilen, aber ich bin gerade dabei, offline zu gehen und habe keine Zeit, sie umzugestalten.

Syntax A:

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

Syntax B:

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

Syntax-C:

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

Syntax 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>

Langfristig werden wir, sobald wir eine bessere Browserunterstützung haben, das neue <template> Element verwenden, mit dem wir einfach Folgendes tun können:

Syntax X:

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

Wenn jemand eine PR für diese Lösung erstellen möchte, wird sie zusammengeführt. Auch wenn Sie eine bestimmte Syntax bevorzugen, sprechen Sie sich bitte aus.

Danke für die Eingabe. Aus meiner Sicht ist Syntax A für verschachtelte Schleifen wie die folgende nicht klar

<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>

Syntax B und C sind ungefähr gleich, ich mag beide Alternativen (auch wenn ich denke, dass Syntax B irgendwie besser ist)

Sofern ich nichts übersehe, hat Syntax D die gleichen Probleme mit verschachtelten Schleifen wie Syntax A

Ich würde mich nach Möglichkeit für B entscheiden, nur weil ich am wenigsten Briefe schreiben muss. Es sieht auch am symmetrischsten aus - ich denke, es wäre aufgrund der visuellen Symmetrie am einfachsten zu handhaben.

Der Kommentar von lgalfasos weist auf ein interessantes Dilemma hin. Was ist, wenn sich die verschachtelte Schleife in seinem Beispiel auf dem ersten Element statt auf dem zweiten befindet. Dann sind jetzt alle Versionen der Syntax unklar, es sei denn, ich übersehe etwas.

Ich verstehe den Unterschied zwischen dem von @lgalfaso vorgeschlagenen ng-repeat-inner und dem ng repeat in Syntax X nicht ganz, wenn auch der <template> Umbruch. Könnte jemand erklären?

Ich bin mir auch nicht sicher, ob ich es verstehe, aber ich vermute, dass das Tag <ng> nicht Teil des DOM wird, wodurch eine illegale Verschachtelungsstruktur unter dl vermieden wird.

Was die vorgeschlagenen Syntaxen angeht, würde ich für B stimmen.

Ich glaube, der Syntax-X-Fall ermöglicht ein generisches Dummy-Wrapper-Element <ng> das nicht Teil des DOM ist und verschiedene Direktiven hosten kann. Dies ist allgemeiner als ng-repeat-inner , das nur für einen bestimmten Anwendungsfall für ng-repeat .

Wenn Syntax X, das langfristige Ziel, nur eine allgemeinere Version von ng-repeat-inner , denke ich, dass ng-repeat-inner auch (*nicht ausschließlich) entlang eines der vorgeschlagenen A,B, C, D für Folgendes:

1. beide Syntax X und ng-repeat-inner haben die gleiche dom-Struktur
   : Wenn Syntax X das langfristige Ziel ist, wäre es schön, jetzt etwas zu haben, das sich strukturell ähnlich darauf ausrichtet, um zukünftiges Refactoring zu verhindern.
2. in den meisten Fällen würden ng-repeat-inner sowieso ausreichen
   : Die Absicht besteht darin, einen äußeren Container zu erstellen, um innere Elemente zu wiederholen.

@daegon123 Der Unterschied zwischen allen aufgeführten Syntaxen von @IgorMinar (einschließlich X) und ng-repeat-inner besteht darin, dass Sie mit den Syntaxen einen Satz von Elementen ohne einen bestimmten Container beliebig wiederholen können. Wiederholen Sie beispielsweise eine Reihe von <tr> s, während es andere nicht wiederholende <tr> s in den table oder tbody . In diesem Fall haben die zu wiederholenden Elemente kein eindeutiges übergeordnetes Element, an das ng-repeat-inner gebunden werden können.

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

Oder mehrere Definitionen pro Objekt in einem <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 Danke für die Kommentare und den Code. Das ist genau der Grund, warum ich vorgeschlagen habe, ng-repeat-inner 'zusammen' mit einer der anderen aufgeführten Syntaxen zu akzeptieren, aber wenn ich tatsächlichen Code in Ihren Kommentaren sehe, frage ich mich, ob ng-repeat-inner überhaupt benötigt wird. Ich werde einen weiteren Kommentar posten, wenn ich etwas finde - danke nochmal!

Das Problem mit ng-repeat-inner ist, dass es nicht in allen Fällen verwendet werden kann, zum Beispiel:

<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>

da Sie kein künstliches Element (wie div) in ul (pro HTML-Spezifikation) einfügen können, kann ng-repeat-inner hier nicht verwendet werden.

Übrigens mit dem Template-Element können wir ein künstliches Element zwischen ul und li setzen.

Hängen Sie sich auch nicht zu sehr an die Syntax X, es war nur ein schnelles und schmutziges Beispiel dafür, was wir irgendwann tun können. Die genaue Syntax muss noch besprochen werden, aber wenn ich schon dabei bin, hier ist eine andere einer:

Syntax 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>

Wie wäre es mit dem Festlegen einer ID für die ng-repeat-Gruppe?
Dann könnten wir von jeder Ebene aus Gegenstände frei daran anhängen. Etwas wie

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

die Flexibilität ermöglichen könnte, die wir brauchen.

Die vorgeschlagene Implementierung von Syntax C stellt sich heraus, dass ich denke, dass dies die Syntax ist, die es ermöglicht, dass derselbe Mechanismus für andere Elemente und Anweisungen einfach ist

Gute Arbeit Lucas! Ich habe den Abend damit verbracht, Syntax C zu implementieren. Es funktioniert richtig, aber Verschachtelung wird nicht unterstützt, da Transklusion alle ng-repeat s in Kommentare verwandelt.

Wenn ich das DOM nicht durchqueren kann, indem ich nach ng-repeat-start suche, kann ich die Tiefe des Attributs ng-repeat-end für den Abgleich nicht berechnen. Dein Ansatz scheint das Problem zu lösen...

Hmmm... irgendwas scheint nicht zu stimmen. In Ihrem Commit fehlen Dokumente, daher kann es sein, dass ich nicht die richtige Syntax verwende.

Schauen Sie sich das an:
http://plnkr.co/edit/sVilxKaNrhNM4JrkuQ5r?p=preview

Ich habe erwartet, dass die Ausgabe für den nicht verschachtelten Fall lautet:

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

Und für den verschachtelten:

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

Verpasse ich etwas?

@lrlopez Das von Ihnen </dl> in Zeile 23

Danke für die schnelle Antwort! Sie haben Recht, in Zeile 23 gab es ein zusätzliches </dl> . Ich habe auch die Bibliothek aktualisiert. Trotzdem komme ich mit dem verschachtelten Beispiel immer noch nicht weiter...

Ok, es sieht so aus, als ob das ein echtes Problem mit Multi-Element-Direktiven ist, die sich auf der gleichen Ebene im DOM befinden. Die PR mit einem Fix für dieses Problem aktualisiert

Fixes wie ng-repeat-inner oder ng-repeat-next lösen nur eine von unzähligen Situationen, in denen Bindungsverhalten an tatsächliche DOM-Knoten Sie einschränken.

Anstatt jede Direktive einzeln zu patchen, können Sie dies für das gesamte Framework lösen, indem Sie Unterstützung für virtuelle Knoten hinzufügen, die im eigentlichen Baum nicht gerendert werden.

Die Idee der Verwendung von Kommentaren ist ähnlich, führt jedoch zu unansehnlichem, schwer zu lesendem Code und Sie müssen immer noch eine Möglichkeit haben, diesen Knoten zu benennen und ihn irgendwie zu schließen. Anstatt eine neue Syntax für Kommentarknoten zu erfinden, verwenden Sie die vorhandene HTML-Syntax.

Betrachten Sie es als ein Konzept, das beispielsweise den stillen SASS-Klassen ähnelt:

<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 zur allgemeinen Idee, aber ich würde mich für etwas wie ng-repeat-group entscheiden.

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

Ich mag die Idee eines virtuellen Knotens, aber ich bin dagegen, dass es hier eine allgemeine Lösung für das Problem wird.

Wenn möglich, möchte ich die Herstellung von künstlichen Behältern einschränken. Während der Container möglicherweise nicht im HTML-Code des Gesamtergebnisses angezeigt wird, würde er den zu verwaltenden HTML-Code überladen.

In vielen Fällen benötigen wir einen Container, der das enthält, was wir wiederholen möchten. Ex:

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

(der Container hier ist die [tr]s)

die Verwendung der vorgeschlagenen virtuellen Knotenlösung würde dies zu Folgendem machen:

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

Erstellen eines redundanten Containers: Selbst diese zweizeilige Hinzufügung lässt mich nicht daran denken, wie es wäre, wenn der Code länger würde.

Ein weiteres Problem ist, dass es mühsam wird, zu verstehen, in welcher Dominanz sich der Code derzeit befindet.
Hier ist ein bisschen Code von @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>

Die Verwendung von virtuellen Knoten macht dies zu:

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

Die Wiederholung der ersten 3 Trs und des letzten Trs sind auf dem gleichen Niveau, aber wenn ich nur kurz den Code durchfliege, besteht die Möglichkeit, dass ich sie als unterschiedliche Ebenen verwechsele oder mich selbst wiederfinde mühsam (vielleicht falsch) berechnen, auf welcher Ebene der Code arbeitet, besonders wenn diese Dinge zu verschachteln beginnen.

Hier ist eine bestimmte Version der Syntax, die mir gefällt (von Art 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 Ihr Vorschlag ist eine Variation dessen, was @IgorMinar als Syntax X gepostet hat. Das Hauptproblem ist, dass die Browserunterstützung einfach nicht vorhanden ist

Ich habe gerade festgestellt, dass es überflüssig ist, sowohl ein ng-repeat-start als auch ein ng-repeat-end wenn Sie nur ein inneres Element wiederholen möchten.

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

Es wäre schön, wenn wir auch ein ng-repeat-single hätten, das dies verhindert. Ex.

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

@daegon123 Wenn Sie ein einzelnes Element wiederholen möchten, tun Sie es einfach

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

Keine Notwendigkeit für ng-repeat-start noch ng- repeat-end

@lgalfaso Danke, anscheinend habe ich mich so sehr in die vorgeschlagene Syntax

Ich denke, bei diesem Thema geht es nicht nur darum, ein Element einfach zu wiederholen. Es geht mehr darum, wie man einen Satz von Elementen wiederholt, ohne seinen Elternteil zu wiederholen. zB <dt>..<dd>... - aber es gab noch viele andere gute Beispiele hier.

Syntax X ist die einzige, die gut definiert ist, sobald Sie mit der Verschachtelung von Wiederholungen beginnen. Wie würden Sie Folgendes in Syntax AD schreiben:

<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>

Es ist ein besserer Vorschlag.
Gesendet von My Blackberry®

-----Originale Nachricht-----
Von: daegon123 [email protected]
Datum: Mo, 06. Mai 2013 22:57:16
An: angle/angular.jsangular. [email protected]
Antwort an: "angular/angular.js" [email protected]
Betreff: Re: [angular.js] ngRepeat mit DL / DD / DT (#1891)

Ich habe gerade festgestellt, dass es überflüssig ist, sowohl ein ng-repeat-start als auch ein ng-repeat-end wenn Sie nur ein inneres Element wiederholen möchten.

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

Es wäre schön, wenn wir auch ein ng-repeat-single hätten, das dies verhindert. Ex.

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

Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an:
https://github.com/angular/angular.js/issues/1891#issuecomment -17524685

+1, das ist eine große Einschränkung.

:+1: freue mich auf eine Lösung dafür! Ich werde vorerst <li> , würde dieses Markup aber gerne umgestalten, wenn eckige eine Lösung dafür herausgibt =)

Würde #2783 das lösen?

Jawohl. Wir haben eine Lösung, die gerade gelandet ist: e46100f7097d9a8f174bdb9e15d4c6098395c3f2

Ich schließe dieses Thema.

Ich habe den Fehler: <TypeError: Object #<Text> has no method 'hasAttribute'> in diesem einfachen Beispiel erhalten:

<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>

Das Problem wird auch als gevgeny angegeben.
hat keine Methode '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>

@khant0x siehe diese Puul-Anfrage https://github.com/angular/angular.js/pull/2859

Wie würde #2783 das lösen:

{[{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"}]},

....

Es muss so etwas ausgegeben werden:

<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> 

Wie wäre die Syntax?

@ChrisCinelli Versuchen Sie es mit 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 scheint also aus HTML5 entfernt worden zu sein ( http://html5doctor.com/the-hgroup-element/ ), außerdem ist das Problem, wie ich schon sagte, komplexer und die Header-Tags wurden nur zum Beispiel verwendet.
Dies ist eindeutig ein Anwendungsfall, der zugelassen werden sollte und der die deklarative Sichtphilosophie von Angular in keiner Weise bricht...

Haben Sie für die gewünschte Ausgabe CSS . in Betracht gezogen?
Zähler?

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

Am Dienstag, den 18. Juni 2013 um 14:46 Uhr schrieb Chris Cinelli [email protected] :

hgroup scheint also aus HTML5 entfernt worden zu sein (
http://html5doctor.com/the-hgroup-element/ ), außerdem, wie ich es war
sagen, dass das Problem komplexer ist und die Header-Tags nur für verwendet wurden
Beispiel.
Dies ist eindeutig ein Anwendungsfall, der erlaubt sein sollte und nicht kaputt geht
die ganze deklarative Sichtphilosophie von Angular...

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/angular/angular.js/issues/1891#issuecomment -19644594
.

Ich habe den Header als Beispiel verwendet, um es zu verdeutlichen... in Wirklichkeit habe ich ein relativ komplexes <div> mit unterschiedlicher Struktur für jede der Ebenen in der Datenstruktur.

Die einzige Lösung, die ich bisher gefunden habe, besteht darin, die Datenstruktur in Javascript zu linearisieren und einen ng-Switch für verschiedene Ebenen zu verwenden, und es wird eine zusätzliche div-Ebene erforderlich sein.
Diese Lösung hat Overhead (dh Speicher und CPU zum Linearisieren der Datenstruktur) und das HTML wird viel weniger klar aussehen als die Unterstrich-Vorlage, die ich stattdessen verwenden kann ...

Können Sie für jede Ebene Anweisungen geben? Ich bin mir nicht sicher, was für ein
Struktur, von der Sie hier sprechen, also würde ich nur nach Strohhalmen greifen.
Aber meiner Erfahrung nach ist ng-switch kaum notwendig, wenn Sie es haben
Zugriff auf Direktiven und ng-include und führt zu Spaghetti-Code-Vorlagen.

Am Dienstag, 18. Juni 2013 um 16:27 Uhr schrieb Chris Cinelli [email protected] :

Ich habe den Header als Beispiel verwendet, um es zu verdeutlichen ... in Wirklichkeit habe ich es
relativ komplexes div mit unterschiedlicher Struktur für jede der Ebenen in
die Datenstruktur.

Die einzige Lösung, die ich bisher gefunden habe, wäre, den Baum in zu linearisieren
Javascript und verwenden Sie einen ng-Schalter für verschiedene Ebenen.
Diese Lösung hat Overhead (dh Speicher und CPU zum Linearisieren der Daten
Struktur) und der HTML-Code wird viel weniger klar aussehen als der
Unterstreichungsvorlage, die ich stattdessen verwenden kann ...

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/angular/angular.js/issues/1891#issuecomment -19650391
.

So sieht es aus: http://d.pr/i/GSX4
Ziemlich kurze Labels (1.xx x), Beschreibungen, Anzahl der Häkchen usw. stammen aus der Datenbank.
Ich erkunde die Option, dieses Teil in Angular umzuwandeln, aber bisher keine Würfel.

Die aktuelle Ansicht ist ziemlich logisch und macht relativ klar, was vor sich geht.
Wenn ich das gut verstehe, schlagen Sie so ziemlich vor, jede Ebene in einem Stück Javascript durchbrechen zu müssen.

Das sieht für mich unordentlicher, weniger zusammenhängend und weniger lesbar aus. Warum muss ich angesichts der Datenstruktur, die alle Informationen zum Anzeigen dieses Panels enthält, Code in einer anderen Datei (dem Modul/Controller) verwenden, wenn die Logik vollständig ansichtsbezogen und sehr spezifisch für diese Ansicht ist? IMHO sollte der Controller sein (und er ist gerade in der aktuellen Implementierung):

• Holen Sie sich die Daten aus dem Modell
• Übergeben Sie das Modell an die Ansicht, damit das Framework es rendern kann

Natürlich kann ich ein paar zusätzliche Divs hinzufügen und das CSS ändern, aber wenn dies notwendig ist, damit es mit Angular funktioniert, scheint Angular im Weg zu stehen, wie es bequem und elegant ist, die Dinge hier zu erledigen.

Ich finde die Datenbindung in KnockoutJS, die sowohl Bindungen an ein HTML-Element <div data-bind="foreach: ..."> als auch eine "containerlose Kontrollfluss-Syntax", <!-- ko foreach: ... --><!-- /ko --> , ermöglicht, außerordentlich nützlich und fände es toll, wenn Angular könnte einen ähnlichen Satz von Syntaxoptionen unterstützen , sehr ähnlich der Syntax, die

Weitere Informationen zur "containerlosen" Option von Knockout:
http://knockoutjs.com/documentation/foreach-binding.html

+1 für @mg1075 virtuelle Syntax.
KnockoutJS erleichtert den Umgang mit dd und verschachtelten Sammlungen.
zB http://stackoverflow.com/questions/20062032/nested-table-using-ng-repeat