Yineleme ng-AngularJs'de yalnızca X kez yineleme


87

Nasıl gibi ng tekrarı kullanabilirsiniz için JavaScript?

misal:

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

4 kez ng-tekrar ile yinelemek istiyorum ama bunu nasıl yapabilirim?


3
Her ikisi de mümkündür: Yönergelerin ngBind gibi deve harfli adları vardır. Yönerge, deve kasası adı yılan kasasına şu özel karakterlerle çevrilerek çağrılabilir:, - veya _. İsteğe bağlı olarak yönerge, HTML doğrulayıcısı ile uyumlu hale getirmek için x- veya data- önekine eklenebilir.
2013

2
vay nasıl bu kadar çok yanlış cevap var, ng-tekrar = "öğelerdeki öğe | limitTo: 4" kullanmalısınız
Araç Seti

Tekrarlayabileceği herhangi bir dizisinin olmaması ihtimali var. Yıldızları bir yıldız derecelendirmesinde görüntülemek için diyelim. Görüntülemeniz gereken yıldız sayısı için bir alan olabilir, ancak bu yinelenemez.
nirazul

@ Toolkit ... ve nedir items..?
TJ

Yanıtlar:


343

Angular, bir limitTo: limit filtresi ile birlikte gelir, ilk x öğeyi ve son x öğeyi sınırlamayı destekler:

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

14
Bir dizideki nesneler üzerinde yinelemeyle de çalıştığı için yanıt bu olmalıdır. Artı, Açısal bir özelliktir.
Ashley Coolman

29
Bu inanılmaz derecede faydalı bir kod parçasıdır, ancak bu aslında OP'nin sorusunu tatmin etmiyor. Sadece n kez tekrar etmenin bir yolunu arıyor ve muhtemelen üzerinde tekrarlayacağı gerçek bir nesnesi yok.
SamHuckaby

2
cevap bu olmalı, AngularJS çekirdeği tarafından sağlanan araçları kullanıyor
Udo

10
Bu aslında sorunu çözmez. Adında bir nesnesi olduğunu varsayıyorsunuzitems
Batman

1
Aslında soru için yararlı bir cevap değil (özellikle X kez yinelemeyi ve X'i sınırlamamayı Google'da araştırdım), ancak yine de yararlı bir kod parçası.
MacK

66

Bu, aklıma gelen en basit çözümdür.

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

İşte bir Plunker örneği.


2
Etrafta oturan denetleyicide herhangi bir işlev kullanmadan akıllı ve çok kullanışlı. Bunun neden açısal bir özellik olmadığı hala şaşkın
MacK

1
Cevap bu olmalı . OP, "ng-tekrarını olduğu gibi kullanma" için sordu. Bu, denetleyiciden herhangi bir "yardım" olmaksızın, tüm uygulamanın doğrudan görünümde olması anlamına gelir. Bu çözüm tam olarak bunu yapıyor ... ve önyüklemesi çok akıllıca.
karfus

Güzel, ancak tüm açısal sürümlerde çalışmıyor. 1.2.9 kullanıyorum ve desteklenmiyor:Error: [$parse:isecfld]
Emaborsa

50

Javascript dizi nesnesinde dilim yöntemini kullanabilirsiniz

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

Kısa n tatlı


2
neden yanlış?. İşe yarıyor. Dizi dizinlerinden 2'den 4'e kadar dizi elemanları istiyorsanız başka bir senaryoyu ele alalım. LimitTo filter ile çalışıyor mu?
Gihan

4
Yanlış değil, bu kadar kolay değilitem in items|limitTo:4
CENT1PEDE

1
Bu, 1-4 öğelerini gösterebileceğim işlevselliği ekler, ardından basit bir sayfalayıcıya izin vererek .slice (0,4) 'ü .slice (5,8) olarak değiştirmek için bir düğmeyi tıklayın. Teşekkürler!
BaneStar007

39

html'de:

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

ve kontrolörde:

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

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

DÜZENLE :

açısal js> 1.2.x ile

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

19
diğer seçenekler: t in [1,2,3,4]veya t in 'aaaa' vb :)
Valentyn Shybanov

4
Angular'ın matematiksel bir döngüyü desteklemesi için bir işlev gerektirmeden destekleyememesi garip görünüyor.
Guido Anselmi

4
Evet 30x iterasyon yapmak zorunda olduğumu hayal edebiliyorum, öyle yazıyorum [1,2,3,4].. Bu ne kasvetli bir çözüm
Matej

2
Daha iyi bir çözüm için aşağıdaki DavidLin yanıtına bakın.
SamHuckaby

@SamHuckaby sorun bir range.limitTo üzerinde yineleniyor bu durumda işe yaramaz. Bu, kendi başına bir anlam ifade eden bir dizi değeri yinelemekle ilgili değil, örneğin 4 kez yineliyor. Varolan bir dizinin bir diliminde 4 kez değil, sadece 4 kez. "[0..4]" gibi adhoc bir dilim oluşturduğunuzda olduğu gibi, gerçek değerleri gerçekten önemsemiyorsunuz, sadece bir işlemi 4 kez tekrarlayacaksınız.
mpm

13

@Mpm tarafından verilen cevap çalışmıyor hata veriyor

Yineleyicide kopyalara izin verilmez. Benzersiz anahtarları belirtmek için "takip et" ifadesini kullanın. Tekrarlayıcı: {0}, Yinelenen anahtar: {1}

Bundan kaçınmak için

ng-tekrar = "getTimes (4) içinde t"

kullanım

$ endeksine göre izle

bunun gibi

<div ng-tekrar = "t in getTimes (4) $ endeksine göre parça"> METİN </div>


tekniğim, kullandığım angularjs sürümüyle çalıştı. plunkr'ı kontrol edin, en kısa zamanda güncelleyeceğim.
mpm

10

Tekrarlamak için 7 defa, bir bir dizi kullanmaya çalıştığınızda uzunluğu = 7 , sonra izlemek it tarafından $ endeksi :

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

b=[]boş bir "b" Dizisi oluşturun,
.length=7boyutunu "7" ye ayarlayın
&&b, yeni "b" Dizisi ng-yinelemede kullanılabilir olsun,
track by $indexburada "$ indeks " yineleme konumudur.
ng-bind="$index + 1"1'den başlayan ekran.

Tekrarlamak için X kere:
Sadece yerine 7 tarafından X .


Bu cevabın, kabul edilen cevapta veya daha yüksek oy alan iki cevapta henüz kapsanmayan ne sağladığı belirsiz.
JamesT

Angular'ın ne kadar güçlü olabileceğinden daha fazlası değil.
funnyniko

3
En yüksek oyu alan iki yanıt, "öğeler" in bir dizi olduğunu varsayıyor gibi görünüyor. Bu, diziyi yerinde yapar.
funnyniko

Aferin, işe yarıyor. OP'nin sorusuna gerçekten hitap eden tek çözüm budur. Sadece birkaç oya sahip olması şaşırtıcı. Daha zarif bir çözüm olup olmadığını merak ediyorum.
Healforgreen

3

Buradaki tüm cevaplar, öğelerin bir dizi olduğunu varsayıyor gibi görünüyor . Ancak, AngularJS'de bir nesne de olabilir. Bu durumda ne limitTo ne de array.slice ile filtreleme çalışmaz. Olası bir çözüm olarak, nesne anahtarlarını kaybetmeyi düşünmüyorsanız, nesnenizi bir diziye dönüştürebilirsiniz. İşte tam da bunu yapmak için bir filtre örneği:

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

    };
});

Bir dizi olduğunda, diğer yanıtlarda belirtildiği gibi dilim veya limitTo kullanın.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.