Angular zapewnia pewne wsparcie dla pętli for używającej liczb w swoich dyrektywach HTML:
<div data-ng-repeat="i in [1,2,3,4,5]">
do something
</div>
Ale jeśli zmienna zakresu zawiera zakres, który ma liczbę dynamiczną, musisz za każdym razem utworzyć pustą tablicę.
W kontrolerze
var range = [];
for(var i=0;i<total;i++) {
range.push(i);
}
$scope.range = range;
W HTML
<div data-ng-repeat="i in range">
do something
</div>
To działa, ale nie jest konieczne, ponieważ w pętli nie będziemy w ogóle używać tablicy zakresów. Czy ktoś wie o ustawianiu zakresu lub regularnej wartości min / maks?
Coś jak:
<div data-ng-repeat="i in 1 .. 100">
do something
</div>
angularjs
angularjs-ng-repeat
matsko
źródło
źródło
Odpowiedzi:
Ulepszyłem nieco tę odpowiedź i wymyśliłem to skrzypce .
Filtr zdefiniowany jako:
Przy takim powtórzeniu:
źródło
Wymyśliłem jeszcze prostszą wersję do tworzenia zakresu między dwiema zdefiniowanymi liczbami, np. Od 5 do 15
Zobacz demo na JSFiddle
HTML :
Kontroler :
źródło
var a; void 0 === a
„naprawdę” niezdefiniowany.Nic oprócz zwykłego Javascript (nie potrzebujesz nawet kontrolera):
Bardzo przydatne przy tworzeniu makiet
źródło
Referencing "constructor" field in Angular expressions is disallowed! Expression: [].constructor(10)
. Może to działało w poprzedniej wersji Angulara lub robię coś złego.[].slice.constructor
, który daje dostępFunction
, a więc do oceny kodu).Wymyśliłem nieco inną składnię, która bardziej mi odpowiada i dodaje opcjonalną dolną granicę:
którego możesz użyć jako
lub
źródło
$digest
iteracje, używając wartości o zasięgu, tj .:ng-repeat="n in [1, maxValue] | makeRange"
?Dla nowych użytkowników angularjs. Indeks można uzyskać za pomocą $ index.
Na przykład:
Który sprawi, że gdy użyjesz przydatnego filtra Gloopy, wydrukuj:
zrób coś o numerze 0
zrób coś z numerem 1
zrób coś z numerem 2
zrób coś z numerem 3
zrób coś z numerem 4
zrób coś z numerem 5
zrób coś z numerem 6
zrób coś z numerem 7
zrób coś z numerem 8
zrób coś 9
źródło
do something number {{n}}
wystarczyłoby.Krótkim sposobem na zrobienie tego byłoby użycie metody _.range () Underscore.js. :)
http://underscorejs.org/#range
źródło
Używam mojej niestandardowej
ng-repeat-range
dyrektywy:a kod HTML to
lub po prostu
a nawet po prostu
Lub tylko
źródło
element.attr('ng-repeat', 'n in [' + rangeString + ']');
nie działa ...Najprostszym rozwiązaniem bez kodu było zainicjowanie tablicy z zakresem i użycie indeksu $ + bez względu na to, jak bardzo chcę to zrównoważyć:
źródło
Definicja metody
Poniższy kod definiuje metodę
range()
dostępną dla całego zakresu twojej aplikacjiMyApp
. Jego zachowanie jest bardzo podobne dorange()
metody Python .Stosowanie
Z jednym parametrem:
0, 1, 2,
Z dwoma parametrami:
1, 2, 3, 4,
Z trzema parametrami:
-2, -1.5, -1, -0.5, 0, 0.5,
źródło
Możesz użyć filtrów „po” lub „przed” w module angular.filter ( https://github.com/a8m/angular-filter )
HTML:
wynik: 5, 6, 7, 8, 9, 10
źródło
Bez żadnych zmian w kontrolerze możesz użyć tego:
Cieszyć się!
źródło
Najkrótsza odpowiedź: 2 linie kodu
JS (w twoim kontrolerze AngularJS)
HTML
...gdzie
myCount
jest liczba gwiazd, które powinny pojawić się w tej lokalizacji.Możesz użyć
$index
do dowolnych operacji śledzenia. Np. Jeśli chcesz wydrukować jakąś mutację w indeksie, możesz umieścić wdiv
:źródło
Korzystanie z UnderscoreJS:
Zastosowanie tego
$rootScope
powoduje, że jest dostępny wszędzie:źródło
Bardzo prosty:
źródło
Cześć, możesz to osiągnąć za pomocą czystego HTML za pomocą AngularJS (nie jest wymagana żadna dyrektywa!)
źródło
Ustaw zakres w kontrolerze
Ustaw Powtórz w pliku szablonu HTML
źródło
Ulepszenie rozwiązania @ Mormegil
stosowanie
3 2 1 0 -1 -2 -3
-3 -2 -1 0 1 2 3
0 1 2 3
0–1–2–3
źródło
Wypróbowałem następujące i zadziałało dla mnie dobrze:
Kątowy 1.3.6
źródło
Późno na imprezę. Ale skończyło to na tym, że:
W twoim kontrolerze:
HTML:
źródło
To jest poprawiona odpowiedź jzm (nie mogę komentować, skomentowałbym jej / jego odpowiedź, ponieważ on / ona zawarł błędy). Funkcja ma wartość zakresu początkowego / końcowego, więc jest bardziej elastyczna i ... działa. Ten szczególny przypadek dotyczy dnia miesiąca:
źródło
Podkręciłem to i zobaczyłem, że może to być przydatne dla niektórych. (Tak, CoffeeScript. Pozwij mnie.)
Dyrektywa
Używać:
HTML
Czy to może być prostsze?
Obawiam się filtrów, ponieważ Angular lubi je bez końca oceniać bez powodu, a jeśli masz tysiące takich jak ja, to ogromne wąskie gardło.
Ta dyrektywa będzie nawet śledzić zmiany w twoim modelu i odpowiednio aktualizować element.
źródło
Jeśli chcesz to osiągnąć w html bez żadnego kontrolera lub fabryki.
źródło
Załóżmy, że
$scope.refernceurl
jest to tablicaźródło
To najprostszy wariant: wystarczy użyć tablicy liczb całkowitych ....
źródło