Iteracja ng-powtórz tylko X razy w AngularJs


87

Jak mogę używać ng-repeat like for w Javascript?

przykład:

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

Chcę wykonać iterację z powtórzeniem ng 4 razy, ale jak mogę to zrobić?


3
Obie są możliwe: dyrektywy mają nazwy z wielbłądami, takie jak ngBind. Dyrektywę można wywołać, tłumacząc nazwę przypadku wielbłąda na skrzynkę węża za pomocą tych znaków specjalnych:, - lub _. Opcjonalnie dyrektywa może być poprzedzona przedrostkiem x- lub data-, aby była zgodna z walidatorem HTML.
asgoth

2
wow, dlaczego tak wiele błędnych odpowiedzi, powinieneś użyć ng-repeat = "item in items | limitTo: 4"
Toolkit

Jest szansa, że ​​nie ma żadnej tablicy do iteracji. Powiedz, aby wyświetlić gwiazdki w postaci gwiazdek. Może istnieć pole określające, ile gwiazd musisz wyświetlić, ale nie jest to iterowalne.
nirazul

@Toolkit ... a co to jest items..?
TJ

Odpowiedzi:


343

Angular zawiera filtr limitTo: limit, obsługuje ograniczanie pierwszych x elementów i ostatnich x elementów:

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

14
To powinna być odpowiedź, ponieważ działa również z iteracją po obiektach w tablicy. Plus jest to funkcja Angular.
Ashley Coolman

29
Jest to niezwykle przydatny fragment kodu, ale w rzeczywistości nie spełnia on pytania OP. Po prostu szuka sposobu na powtórzenie n razy i prawdopodobnie nie ma rzeczywistego obiektu do powtórzenia.
SamHuckaby,

2
to powinna być odpowiedź, korzysta z narzędzi dostarczonych przez rdzeń AngularJS
Udo

10
To właściwie nie rozwiązuje problemu. Zakładasz, że ma obiekt o nazwieitems
Batman,

1
Rzeczywiście, nie jest to użyteczna odpowiedź na to pytanie (wyszukałem w Google konkretnie, jak iterować X razy, a nie ograniczać X), ale mimo to przydatny fragment kodu.
MacK

65

To najprostsze obejście, jakie mogłem wymyślić.

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

Oto przykład Plunkera.


2
Sprytny i bardzo przydatny bez użycia jakiejkolwiek funkcji w kontrolerze siedzącym w pobliżu. Wciąż zastanawiam się, dlaczego nie jest to funkcja kątowa
MacK

1
To powinna być odpowiedź . OP poprosił o „używanie ng-repeat like for”. Oznacza to, że cała implementacja jest bezpośrednio widoczna, bez żadnej „pomocy” ze strony kontrolera. To rozwiązanie robi dokładnie to ... i jest cholernie sprytne do uruchomienia.
karfus

Ładnie, ale nie działa na wszystkich wersjach kątowych. Używam wersji 1.2.9 i nie jest obsługiwana:Error: [$parse:isecfld]
Emaborsa

50

Możesz użyć metody wycinka w obiekcie tablicy javascript

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

Krótkie i słodkie


2
dlaczego jest źle ?. To działa. Weźmy inny scenariusz, jeśli chcesz, aby elementy tablicy od 2 do 4 z indeksów tablic. Czy działa z filtrem limitTo?
Gihan

4
To nie jest złe, po prostu nie jest tak łatwe jakitem in items|limitTo:4
CENT1PEDE,

1
Dodaje to funkcjonalność, dzięki której mógłbym wyświetlać pozycje 1-4, a następnie kliknąć przycisk, aby zmienić .slice (0,4) na .slice (5,8), pozwalając na prosty paginator. Dzięki!
BaneStar007

39

w html:

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

aw kontrolerze:

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

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

EDYTOWAĆ :

z angularjs> 1.2.x

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

19
inne opcje: t in [1,2,3,4]lub t in 'aaaa' itp. :)
Valentyn Shybanov

4
Wydaje się dziwne, że Angular nie może obsługiwać pętli matematycznej bez wymagania funkcji do jej poparcia.
Guido Anselmi,

4
Tak, mogę sobie wyobrazić, że będę musiał iterować 30x, pisząc to jak [1,2,3,4]… Co za fatalne rozwiązanie
Matej.

2
Zobacz poniżej odpowiedź DavidLin, aby uzyskać lepsze rozwiązanie.
SamHuckaby

@SamHuckaby problem polega na iteracji po zakresie.limitTo jest w tym przypadku bezużyteczne. Nie chodzi o iterację po zestawie wartości, które same w sobie coś znaczą, chodzi na przykład o iterację 4 razy. Nie 4 razy na wycinku istniejącej tablicy, tylko 4 razy. tak jak w coffeescript, kiedy tworzysz plasterek adhoc, np. „[0..4]”, tak naprawdę nie przejmujesz się rzeczywistymi wartościami, po prostu powtórz operację 4 razy.
mpm

13

Odpowiedź udzielona przez @mpm nie działa, powoduje błąd

Duplikaty w repeaterze są niedozwolone. Użyj wyrażenia „śledź według”, aby określić unikalne klucze. Powtarzacz: {0}, zduplikowany klucz: {1}

Aby tego uniknąć wraz z

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

posługiwać się

śledzenie według $ index

lubię to

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


moja technika działała z wersją angularjs, której użyłem, po prostu sprawdź plunkr, zaktualizuję go jak najszybciej.
mpm

10

Aby powtórzyć 7 razy, spróbuj użyć tablicy o długości = 7 , a następnie śledźwedług $ index :

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

b=[]utwórz pustą tablicę „b”,
.length=7ustaw jej rozmiar na „7”,
&&bniech nowa tablica „b” będzie dostępna dla ng-repeat,
track by $indexgdzie „$ index” jest pozycją iteracji.
ng-bind="$index + 1"wyświetlanie począwszy od 1.

Aby powtórzyć X razy:
po prostu zastąpić 7 przez X .


Nie jest jasne, co zapewnia ta odpowiedź, czego nie obejmuje już zaakceptowana odpowiedź lub dwie odpowiedzi z wyższymi głosami.
JamesT

Nic poza tym, jak potężny potrafi być Angular.
funnyniko

3
Wydaje się, że odpowiedzi z dwóch wyższych głosów zakładają, że „pozycje” to tablica. Ten sprawia, że ​​tablica jest na miejscu.
funnyniko

Dobra robota, to działa. To jedyne rozwiązanie, które faktycznie odpowiada na pytanie PO. To niesamowite, że ma tylko kilka głosów. Zastanawiam się tylko, czy istnieje bardziej eleganckie rozwiązanie.
Healforgreen

3

Wszystkie odpowiedzi wydają się zakładać, że elementy są tablicą. Jednak w AngularJS równie dobrze może to być obiekt. W takim przypadku nie będzie działać ani filtrowanie za pomocą limitTo ani array.slice. Jednym z możliwych rozwiązań jest konwersja obiektu na tablicę, jeśli nie masz nic przeciwko utracie kluczy obiektów. Oto przykład filtru, który to robi:

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

    };
});

Gdy jest to tablica, użyj plastra lub limitTo, jak podano w innych odpowiedziach.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.