Czy jest na to sposób ng-repeat
określoną liczbę razy zamiast konieczności iteracji po tablicy?
Na przykład poniżej chcę, aby element listy pojawił się 5 razy, przy założeniu, że jest $scope.number
równy 5 dodatkowo zwiększając liczbę, więc każdy element listy zwiększa się o 1, 2, 3, 4, 5
Pożądany rezultat:
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
javascript
html
angularjs
angularjs-ng-repeat
Malcr001
źródło
źródło
Odpowiedzi:
Aktualizacja (25.09.2018)
Nowsze wersje AngularJS (> = 1.3.0) pozwalają to zrobić tylko ze zmienną (żadna funkcja nie jest wymagana):
Nie było to możliwe w momencie pierwszego pytania. Podziękowania dla @Nikhil Nambiar z jego odpowiedzi poniżej dla tej aktualizacji
Oryginał (29.05.2013)
W tej chwili
ng-repeat
akceptuje tylko kolekcję jako parametr, ale możesz to zrobić:I gdzieś w twoim kontrolerze:
Pozwoliłoby to na zmianę
$scope.number
dowolnej liczby i utrzymanie wiązania, którego szukasz.EDYCJA (1/6/2014) - Nowsze wersje AngularJS (> = 1.1.5) wymagają
track by $index
:Oto skrzypce z kilkoma listami używającymi tej samej
getNumber
funkcji.źródło
możesz to zrobić:
źródło
Oto przykład, jak możesz to zrobić. Zauważ, że zainspirował mnie komentarz w dokumentacji powtórzeń ng: http://jsfiddle.net/digitalzebra/wnWY6/
Zwróć uwagę na dyrektywę ng-repeat:
Oto kontroler:
źródło
_.range
Underscore lub lodash, aby utworzyć tablicę: $ scope.range = _.range (0, n);Myślę, że ten jsFiddle z tego wątku może być tym, czego szukasz.
źródło
$scope.number
wynosi 5”. Chodziło o to, aby użyć zmiennej liczby całkowitej do zdefiniowania liczby elementów, nie kodować jej na stałe i nie używać predefiniowanej tablicy.$scope.limit = 2
) i używać go jak...|limitTo:limit
- patrz zaktualizowane skrzypceProstsze podejście byłoby (na przykład 5 razy):
źródło
Array(5)
((a nawet[...Array(5).keys()]
uzyskać tablicę [0,1,2,3,4])Natrafiłem na ten sam problem. Natknąłem się na ten wątek, ale nie podobały mi się metody, które tu zastosowali. Moje rozwiązanie wykorzystywało underscore.js, które już zainstalowaliśmy. To takie proste:
To zrobi dokładnie to, czego szukasz.
źródło
$scope._ = _
.$rootScope
aby można go było używać wszędzie. Umieść to w swojejapp.run
funkcji zaraz poapp.config
:app.run(function ($rootScope) { $rootScope._ = _; });
Chciałem, aby mój html był bardzo minimalny, dlatego zdefiniowałem mały filtr, który tworzy tablicę [0,1,2, ...] tak jak zrobili to inni:
Następnie w widoku można używać w następujący sposób:
źródło
To jest naprawdę Brzydkie, ale działa bez kontrolera dla liczby całkowitej lub zmiennej:
liczba całkowita:
zmienna:
źródło
_ in (_ = []).length = 33; _ track by $index
nieco mniejszyIstnieje wiele sposobów, aby to zrobić. Naprawdę martwiłem się logiką w moim kontrolerze, dlatego stworzyłem prostą dyrektywę, aby rozwiązać problem powtarzania elementu n-razy.
Instalacja:
Dyrektywę można zainstalować za pomocą
bower install angular-repeat-n
Przykład:
produkuje:
1234
Działa również przy użyciu zmiennej scope:
Źródło:
Github
źródło
To tylko niewielka odmiana zaakceptowanej odpowiedzi, ale tak naprawdę nie trzeba tworzyć nowej funkcji. Aby zaimportować „Array” w zakresie:
Zobacz to skrzypce, aby zobaczyć przykład na żywo.
źródło
Najłatwiejsza odpowiedź: 2 linie kodu
JS (w twoim kontrolerze AngularJS)
HTML
... gdzie
repeatCount
jest liczba powtórzeń, które powinny pojawić się w tej lokalizacji.źródło
repeatCount
go rzeczywistą liczbą w kodzie HTML, i dopóki ta liczba będzie mniejsza lub równaMAX_REPEATS
, pozwoli ci to ustawić liczbę powtórzeń w HTML.ngRepeat
dyrektywy. UżywanieArray.prototype.slice
i idiomatyczny JS powinien być zawsze wybierany nad biblioteką taką jak underscore.js (zależnie od kompatybilności przeglądarki).kątowy daje bardzo słodką funkcję zwaną plasterkiem . Dzięki temu możesz osiągnąć to, czego szukasz. np. ng-repeat = "ab in abc.slice (startIndex, endIndex)"
to demo: http://jsfiddle.net/sahilosheal/LurcV/39/ pomoże ci powiedzieć, jak korzystać z tej funkcji „ułatwiającej życie”. :)
HTML:
CSS:
ng-JS:
źródło
Oto odpowiedź na pytanie kątowe 1.2.x
Zasadniczo jest to to samo, z niewielką modyfikacją
ng-repeat
oto skrzypce: http://jsfiddle.net/cHQLH/153/
Wynika to z faktu, że kątowy 1.2 nie zezwala na powielanie wartości w dyrektywie. Oznacza to, że jeśli próbujesz wykonać następujące czynności, pojawi się błąd.
źródło
Możesz użyć
ng-if
dyrektywy zng-repeat
Jeśli więc liczba jest liczbą powtórzeń elementu:
źródło
ng-repeat
w ten sposób nadal będzie generować komentarze z tagami (<!-- ngIf: $index < num -->
itp.). Po prostu nie będzie żadnychli
elementów do renderowania DOM. Sprawdź „wyświetl źródło” w okienku wyników tutaj, aby zobaczyć, co mam na myśli.Możesz użyć tego przykładu.
Wewnątrz kontrolera:
Przykład dla elementu select po stronie kodu HTML:
źródło
Użytkownicy korzystający z CoffeeScript mogą korzystać ze zrozumienia zakresu:
Dyrektywa
lub kontroler
Szablon
źródło
Rozwijając nieco pierwszą odpowiedź Ivana, możesz użyć łańcucha jako kolekcji bez ścieżki według instrukcji, pod warunkiem, że znaki są unikalne, więc jeśli przypadek użycia jest mniejszy niż 10 liczb, to jest pytanie, które po prostu zrobiłbym :
Co jest nieco zakłopotane, jasne, ale wystarczająco proste, aby na nie patrzeć i niezbyt mylące.
źródło
Najpierw utwórz filtr kątowy za pomocą LoDash:
Funkcja czasów LoDash jest w stanie obsłużyć null, niezdefiniowane, 0, liczby i ciąg znaków reprezentujący liczby.
Następnie użyj go w swoim HTML jako:
lub
źródło
Potrzebowałem bardziej dynamicznego rozwiązania tego problemu - w którym mógłbym zwiększyć liczbę powtórzeń.
HTML
Kontrola powielacza
JS
źródło
Angular zapewnia filtry do modyfikowania kolekcji. W takim przypadku kolekcja byłaby pusta, tj. [], A filtr przyjmuje również następujące argumenty:
JS:
Ta metoda jest bardzo podobna do tych zaproponowanych powyżej i niekoniecznie jest lepsza, ale pokazuje moc filtrów w AngularJS.
źródło
Jeśli n nie jest zbyt wysokie, inną opcją może być użycie split ('') z ciągiem n znaków:
źródło
Zetknąłem się z tym samym problemem i właśnie z tego wyszło:
... i HTML:
PRZYKŁAD NA ŻYWO
Użyłem
times
funkcji podkreślenia, ponieważ używaliśmy jej już w projekcie, ale można ją łatwo zastąpić rodzimym kodem.źródło
Tworzę dyrektywę wielokrotnego użytku, w której maksymalna liczba będzie pochodzić z innego powtórzenia ng. To jest edycja najlepszej odpowiedzi.
Po prostu zmień kod na kontrolerze na to -
Zwróci to nową tablicę z określoną liczbą iteracji
źródło
ponieważ iteracja po ciągu spowoduje wyświetlenie elementu dla każdego znaku:
możemy użyć tego brzydkiego, ale bez kodu obejścia, używając
number|n decimal places
filtru natywnego.w ten sposób będziemy mieć
mynumber
elementy bez dodatkowego kodu. Powiedzmy'0.000'
.Używamy
mynumber - 2
do kompensacji.0.
To nie działa dla liczb poniżej 3, ale może być przydatne w niektórych przypadkach.
źródło
track by $index
?ng-repeat="i in [1,2,3,4]"
$scope.number
aaaa
był przykładem wyjaśniającym moje - nie bardzo eleganckie - obejście. Używając na stałe „aaaa” lub „abcd”, otrzymujesz listę o stałej długości, ale dodając miejsca pomynumber-2
przecinku do 0, otrzymujesz „ciąg znaków” zmynumber
znakami. Powiedzmymynumber=5
, rozumiemy'0.000'
, a następnie iterujemy to za pomocą indeksu $źródło
prosta droga:
w komponencie / kontrolerze, a następnie:
Ten kod pochodzi z mojego projektu maszynopisu, ale można go przestawić na czysty JavaScript
źródło