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

Vural
źródło
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>
David Lin
źródło
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.

ChandrasekarG
źródło
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

Gihan
źródło
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>
mpm
źródło
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>

Pratik Goenka
źródło
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 .

funnyniko
źródło
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.

Per Quested Aronsson
źródło