AngularJS ng-repeat ohne HTML-Element

Ich verwende derzeit diesen Code, um eine Liste zu rendern:

<ul ng-cloak>
    <div ng-repeat="n in list">
        <li><a href="{{ n[1] }}">{{ n[0] }}</a></li>
        <li class="divider"></i>
    </div>
    <li>Additional item</li> 
</ul>

Das <div>Element verursacht jedoch in einigen Browsern einige sehr geringfügige Renderfehler. Ich würde gerne wissen, ob es eine Möglichkeit gibt, die ng-Wiederholung ohne den div-Container oder eine alternative Methode durchzuführen, um den gleichen Effekt zu erzielen.

Wie Andy Joslin sagte, arbeiteten sie an kommentarbasierten ng-Wiederholungen, aber anscheinend gab es zu viele Browserprobleme . Glücklicherweise bietet AngularJS 1.2 eine integrierte Unterstützung für das Wiederholen, ohne untergeordnete Elemente mit den neuen Anweisungen ng-repeat-startund hinzuzufügen ng-repeat-end.

Hier ist ein kleines Beispiel für das Hinzufügen einer Bootstrap-Paginierung :

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat-start="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li ng-repeat-end class="divider"></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Ein vollständiges Arbeitsbeispiel finden Sie hier .

John Lindquist hat auch ein Video-Tutorial dazu auf seiner ausgezeichneten Egghead.io-Seite .

KnockoutJS containerlose Bindungssyntax

Bitte nehmen Sie sich eine Sekunde Zeit: KnockoutJS bietet eine äußerst bequeme Möglichkeit, eine containerlose Bindungssyntax für die foreachBindung zu verwenden, wie in Anmerkung 4 der foreachBindungsdokumentation erläutert . http://knockoutjs.com/documentation/foreach-binding.html

Wie das Beispiel für die Knockout-Dokumentation zeigt, können Sie Ihre Bindung wie folgt in KnockoutJS schreiben:

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

Ich finde es eher bedauerlich, dass AngularJS diese Art von Syntax nicht anbietet.

Winkel ng-repeat-startundng-repeat-end

Bei der AngularJS-Methode zur Lösung von ng-repeatProblemen sind die Beispiele, auf die ich stoße, vom Typ jmagnusson, der in seiner (hilfreichen) Antwort veröffentlicht wurde.

<li ng-repeat-start="page in [1,2,3,4,5]"><a href="#">{{page}}</a></li>
<li ng-repeat-end></li>

Mein ursprünglicher Gedanke beim Sehen dieser Syntax ist: wirklich? Warum erzwingt Angular all dieses zusätzliche Markup, mit dem ich nichts zu tun haben möchte und das in Knockout so viel einfacher ist? Aber dann begann mich der Kommentar von hitautodestruct in jmagnussons Antwort zu fragen: Was wird mit ng-repeat-start und ng-repeat-end auf separaten Tags generiert?

Eine sauberere Art zu verwenden ng-repeat-startundng-repeat-end

Bei der Untersuchung der Behauptung von hitautodestruct ist das Hinzufügen ng-repeat-endzu einem separaten Tag genau das, was ich in den meisten Fällen nicht tun möchte, da es völlig nutzlose Elemente erzeugt: in diesem Fall <li>Elemente, in denen sich nichts befindet. Die paginierte Liste von Bootstrap 3 formatiert die Listenelemente so, dass es so aussieht, als hätten Sie keine überflüssigen Elemente generiert. Wenn Sie jedoch das generierte HTML überprüfen, sind sie vorhanden.

Glücklicherweise müssen Sie nicht viel tun, um eine sauberere Lösung und eine kürzere Menge an HTML zu erhalten: Setzen Sie die ng-repeat-endDeklaration einfach auf dasselbe HTML-Tag, das das enthältng-repeat-start .

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>    
  <li ng-repeat-start="page in [1,2,3,4,5]" ng-repeat-end><a href="#"></a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Dies bietet 3 Vorteile:

1. weniger HTML-Tags zu schreiben
2. nutzlose, leere Tags werden von Angular nicht generiert
3. Wenn das zu wiederholende Array leer ist, wird das Tag mit ng-repeatnicht generiert, was Ihnen den gleichen Vorteil bietet, den Ihnen die containerlose Bindung von Knockout in dieser Hinsicht bietet

Aber es gibt immer noch einen saubereren Weg

Nachdem Sie die Kommentare in github zu diesem Problem für Angular unter https://github.com/angular/angular.js/issues/1891 weiter gelesen haben , müssen
Sie nicht dieselben Vorteile verwenden ng-repeat-startund ng-repeat-enderzielen. Stattdessen können wir, wenn wir noch einmal jmagnussons Beispiel gabeln, einfach gehen:

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Also wann ng-repeat-startund verwenden ng-repeat-end? Gemäß der eckigen Dokumentation zu

... eine Reihe von Elementen anstelle von nur einem übergeordneten Element wiederholen ...

Genug geredet, zeigen Sie einige Beispiele!

Meinetwegen; Dieser JSBIN führt fünf Beispiele durch, was passiert, wenn Sie es tun und wenn Sie es nicht ng-repeat-endfür dasselbe Tag verwenden.

http://jsbin.com/eXaPibI/1/

ngRepeat reicht möglicherweise nicht aus, Sie können dies jedoch mit einer benutzerdefinierten Direktive kombinieren. Sie können die Aufgabe des Hinzufügens von Teilerelementen zum Code delegieren, wenn Ihnen ein wenig jQuery nichts ausmacht.

 <li ng-repeat="item in coll" so-add-divide="your exp here"></li>

Solch eine einfache Direktive benötigt nicht wirklich einen Attributwert, bietet Ihnen jedoch viele Möglichkeiten, wie das bedingte Hinzufügen eines Teilers nach Index, Länge usw. oder etwas völlig anderem.

Ich hatte kürzlich das gleiche Problem, da ich eine beliebige Sammlung von Bereichen und Bildern wiederholen musste - ein Element um sie herum war keine Option - es gibt eine einfache Lösung, erstellen Sie jedoch eine "Null" -Richtlinie:

app.directive("diNull", function() {
        return {
            restrict: "E",
            replace: true,
            template: ""
        };
    });

Sie können dann eine Wiederholung für dieses Element verwenden, wobei element.url auf die Vorlage für dieses Element verweist:

<di-null ng-repeat="element in elements" ng-include="element.url" ></di-null>

Dadurch werden beliebig viele verschiedene Vorlagen ohne Container wiederholt

Hinweis: hmm, ich hätte schwören können, dass dies das di-null-Element beim Rendern entfernt hat, aber wenn ich es erneut überprüfe, werden meine Layoutprobleme nicht gelöst ... Kurioser und Kurioser ...

Es gibt eine Einschränkung der Kommentaranweisung, aber ngRepeat unterstützt sie nicht (da ein Element zum Wiederholen benötigt wird).

Ich glaube, ich habe gesehen, wie das eckige Team sagte, sie würden an Kommentaren und Wiederholungen arbeiten, aber ich bin mir nicht sicher. Sie sollten ein Problem dafür im Repo öffnen. http://github.com/angular/angular.js

Es gibt keine magische Methode für Angular, um dies zu tun. In Ihrem Fall können Sie dies tun, um gültiges HTML zu erhalten, wenn Sie Bootstrap verwenden. Dann erhalten Sie den gleichen Effekt wie beim Hinzufügen des li.dividers

Erstellen Sie eine Klasse:

span.divider {
 display: block;
}

Ändern Sie nun Ihren Code wie folgt:

<ul ng-cloak>
 <li div ng-repeat="n in list">
    <a href="{{ n[1] }}">{{ n[0] }}</a>
    <span class="divider"></span>
 </li>
 <li>Additional item</li>
</ul>

für eine Lösung, die wirklich funktioniert

html

<remove  ng-repeat-start="itemGroup in Groups" ></remove>
   html stuff in here including inner repeating loops if you want
<remove  ng-repeat-end></remove>

Fügen Sie eine angle.js-Direktive hinzu

//remove directive
(function(){
    var remove = function(){

        return {    
            restrict: "E",
            replace: true,
            link: function(scope, element, attrs, controller){
                element.replaceWith('<!--removed element-->');
            }
        };

    };
    var module = angular.module("app" );
    module.directive('remove', [remove]);
}());

für eine kurze Erklärung,

ng-repeat bindet sich an das <remove>Element und schleift, wie es sollte, und da wir ng-repeat-start / ng-repeat-end verwendet haben, schleift es einen HTML-Block, nicht nur ein Element.

Anschließend platziert die benutzerdefinierte Direktive zum Entfernen die <remove>Start- und Endelemente mit<!--removed element-->