Iteration ng-Wiederholung nur X-mal in AngularJs


86

Wie kann ich ng-repeat wie für in Javascript?

Beispiel:

<div ng-repeat="4">Text</div>

Ich möchte 4 Mal mit ng-repeat iterieren, aber wie kann ich das tun?


3
Beides ist möglich: Direktiven haben Kamelnamen wie ngBind. Die Direktive kann aufgerufen werden, indem der Name des Kamelfalls in einen Schlangenfall mit den folgenden Sonderzeichen übersetzt wird :, - oder _. Optional kann der Direktive x- oder data- vorangestellt werden, damit sie HTML-validator-kompatibel ist.
Asgoth

2
Wow, wie kommt es, dass so viele falsche Antworten vorliegen? Sie sollten ng-repeat = "item in items | limitTo: 4" verwenden
Toolkit

Es besteht die Möglichkeit, dass er kein Array zum Durchlaufen hat. Sagen wir, um die Sterne in einer Sternebewertung anzuzeigen. Möglicherweise gibt es ein Feld für die Anzahl der Sterne, die Sie anzeigen müssen, dies ist jedoch nicht iterierbar.
Nirazul

@Toolkit ... und was ist items..?
TJ

Antworten:


341

Angular wird mit einem limitTo: limit-Filter geliefert, der das Begrenzen der ersten x Elemente und der letzten x Elemente unterstützt:

<div ng-repeat="item in items|limitTo:4">{{item}}</div>

14
Dies sollte die Antwort sein, da es auch mit dem Iterieren über Objekte in einem Array funktioniert. Plus es ist eine Angular-Funktion.
Ashley Coolman

29
Dies ist ein unglaublich nützlicher Code, der jedoch die Frage des OP nicht wirklich erfüllt. Er sucht einfach nach einer Möglichkeit, n-mal zu wiederholen, und hat wahrscheinlich kein tatsächliches Objekt, über das er iterieren kann.
SamHuckaby

2
Dies sollte die Antwort sein, es verwendet die Tools von AngularJS Core
Udo

10
Dies löst das Problem nicht wirklich. Sie nehmen an, er hat ein Objekt namensitems
Batman

1
Keine nützliche Antwort auf die Frage (ich habe speziell gegoogelt, wie man X-mal iteriert und X nicht einschränkt), aber dennoch ein nützlicher Code.
MacK

66

Dies ist die einfachste Problemumgehung, die ich mir vorstellen kann.

<span ng-repeat="n in [].constructor(5) track by $index">
{{$index}}
</span>

Hier ist ein Plunker-Beispiel.


2
Clever und sehr nützlich, ohne eine Funktion im herumsitzenden Controller zu verwenden. Immer noch verblüfft, warum dies kein eckiges Feature ist
MacK

1
Dies sollte die Antwort sein . OP fragte nach "using ng-repeat like for". Dies bedeutet, dass die gesamte Implementierung direkt in der Ansicht angezeigt wird, ohne dass die Steuerung "unterstützt". Diese Lösung macht genau das ... und ist verdammt klug zu booten.
Karfus

Schön, funktioniert aber nicht bei allen Winkelversionen. Ich benutze 1.2.9 und es wird nicht unterstützt:Error: [$parse:isecfld]
Emaborsa

50

Sie können die Slice-Methode im Javascript-Array-Objekt verwenden

<div ng-repeat="item in items.slice(0, 4)">{{item}}</div>

Kurz und süß


2
warum ist es falsch? Es klappt. Nehmen wir ein anderes Szenario, wenn Sie Array-Elemente von 2 bis 4 aus Array-Indizes möchten. Funktioniert es mit limitTo Filter?
Gihan

4
Es ist nicht falsch, es ist einfach nicht so einfach wieitem in items|limitTo:4
CENT1PEDE

1
Dies fügt die Funktionalität hinzu, mit der ich die Elemente 1 bis 4 anzeigen und dann auf eine Schaltfläche klicken kann, um .slice (0,4) in .slice (5,8) zu ändern, wodurch ein einfacher Paginator ermöglicht wird. Vielen Dank!
BaneStar007

39

im HTML:

<div ng-repeat="t in getTimes(4)">text</div>

und in der Steuerung:

$scope.getTimes=function(n){
     return new Array(n);
};

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

EDIT:

mit eckigen js> 1.2.x.

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>

19
andere Optionen: t in [1,2,3,4]oder t in 'aaaa' etc :)
Valentyn Shybanov

4
Es scheint seltsam, dass Angular eine mathematische Schleife nicht unterstützen kann, ohne dass eine Funktion zum Sichern erforderlich ist.
Guido Anselmi

4
Ja, ich kann mir vorstellen, 30x iterieren zu müssen und es so zu schreiben [1,2,3,4]. Was für eine düstere Lösung dieses
Matej

2
Siehe unten Antwort von DavidLin für eine bessere Lösung.
SamHuckaby

@SamHuckaby das Problem iteriert über einen Bereich.limitTo ist in diesem Fall nutzlos. Es geht nicht darum, über eine Reihe von Werten zu iterieren, die für sich genommen etwas bedeuten, sondern beispielsweise viermal. Nicht viermal über einen Slice eines vorhandenen Arrays, sondern nur viermal. Genau wie in Coffeescript, wenn Sie ein Ad-hoc-Slice wie "[0..4]" erstellen, kümmern Sie sich nicht wirklich um die tatsächlichen Werte, nur dass Sie einen Vorgang viermal wiederholen.
mpm

13

Die Antwort von @mpm funktioniert nicht, es wird der Fehler ausgegeben

Duplikate in einem Repeater sind nicht zulässig. Verwenden Sie den Ausdruck 'track by', um eindeutige Schlüssel anzugeben. Repeater: {0}, doppelter Schlüssel: {1}

Um dies zusammen mit zu vermeiden

ng-repeat = "t in getTimes (4)"

verwenden

Track nach $ index

so was

<div ng-repeat = "t in getTimes (4) Spur nach $ index"> TEXT </ div>


Meine Technik funktionierte mit der Version von AngularJs, die ich verwendet habe. Überprüfen Sie einfach den Plunkr, ich werde ihn so schnell wie möglich aktualisieren.
mpm

10

Um 7 Mal zu wiederholen , versuchen Sie, ein Array mit der Länge = 7 zu verwenden , und verfolgen Sie es dann anhand des $ index :

<span ng-repeat="a in (((b=[]).length=7)&&b) track by $index" ng-bind="$index + 1 + ', '"></span>

b=[]Erstellen Sie ein leeres Array «b»,
.length=7setzen Sie seine Größe auf «7» und
&&blassen Sie das neue Array «b» für ng-repeat verfügbar sein,
track by $indexwobei «$ index» die Position der Iteration ist.
ng-bind="$index + 1"Anzeige ab 1.

Um es zu wiederholen X Zeiten:
nur ersetzen 7 durch X .


Unklar, was diese Antwort liefert, die nicht bereits von der akzeptierten Antwort oder den beiden Antworten mit höheren Stimmen abgedeckt ist.
JamesT

Nichts weiter als wie mächtig Angular sein kann.
Funnyniko

3
Die Antworten mit zwei höheren Stimmen scheinen anzunehmen, dass «Elemente» ein Array ist. Dieser macht das Array an Ort und Stelle.
Funnyniko

Gut gemacht, es funktioniert. Dies ist die einzige Lösung, die sich tatsächlich mit der Frage des OP befasst. Es ist erstaunlich, dass es nur wenige Stimmen hat. Ich frage mich nur, ob es eine elegantere Lösung gibt.
Healforgreen

3

Alle Antworten hier scheinen davon auszugehen, dass Elemente ein Array sind. In AngularJS kann es sich jedoch genauso gut um ein Objekt handeln. In diesem Fall funktioniert weder das Filtern mit limitTo noch mit array.slice. Als eine mögliche Lösung können Sie Ihr Objekt in ein Array konvertieren, wenn es Ihnen nichts ausmacht, die Objektschlüssel zu verlieren. Hier ist ein Beispiel für einen Filter, um genau das zu tun:

myFilter.filter('obj2arr', function() {
    return function(obj) {
        if (typeof obj === 'object') {
            var arr = [], i = 0, key;
            for( key in obj ) {
                arr[i] = obj[key];
                i++;
            }
            return arr;
        }
        else {
            return obj;
        }

    };
});

Wenn es sich um ein Array handelt, verwenden Sie Slice oder LimitTo, wie in anderen Antworten angegeben.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.