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ź ją 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.