Iterasi ng-ulangi hanya X kali di AngularJs

87

Bagaimana saya bisa menggunakan ng-repeat like for di Javascript?

contoh:

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

Saya ingin mengulang dengan ng-repeat 4 kali tapi bagaimana caranya?

Vural
sumber
3
Keduanya dimungkinkan: Perintah memiliki nama dalam kerangka unta seperti ngBind. Arahan dapat dipanggil dengan menerjemahkan nama kasus unta menjadi kasus ular dengan karakter khusus berikut:, -, atau _. Secara opsional, arahan dapat diawali dengan x-, atau data- agar sesuai dengan validator HTML.
asgoth
2
wow kenapa banyak sekali jawaban yang salah, kamu harus menggunakan ng-repeat = "item in items | limitTo: 4"
Toolkit
Ada kemungkinan dia tidak memiliki array untuk diiterasi. Katakanlah, untuk menampilkan bintang di peringkat bintang. Mungkin ada bidang tentang berapa banyak bintang yang perlu Anda tampilkan, tetapi ini tidak dapat diulang.
nirazul
@ Toolkit ... dan apa items..?
TJ

Jawaban:

343

Angular dilengkapi dengan limitTo: filter batas, ini mendukung pembatasan item x pertama dan item x terakhir:

<div ng-repeat="item in items|limitTo:4">{{item}}</div>
David Lin
sumber
14
Ini harus menjadi jawabannya, karena ini juga bekerja dengan iterasi objek dalam sebuah array. Ditambah fitur Angular-nya.
Ashley Coolman
29
Ini adalah bagian kode yang sangat berguna, tetapi ini tidak benar-benar memenuhi pertanyaan OP. Dia hanya mencari cara untuk mengulang n kali, dan kemungkinan besar tidak memiliki objek yang sebenarnya untuk diulang.
SamHuckaby
2
ini harus menjadi jawabannya, ia menggunakan alat yang disediakan oleh inti AngularJS
Udo
10
Ini tidak benar-benar menyelesaikan masalah. Anda mengasumsikan dia memiliki sebuah objek bernamaitems
Batman
1
Memang bukan jawaban yang berguna untuk pertanyaan itu (saya mencari di Google secara khusus cara mengulang X kali, dan tidak membatasi X) tetapi tetap saja sepotong kode yang berguna.
MacK
66

Ini adalah solusi paling sederhana yang dapat saya pikirkan.

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

Berikut contoh Plunker.

ChandrasekarG
sumber
2
Cerdas dan sangat berguna tanpa menggunakan fungsi apa pun di pengontrol yang ada. Masih bingung mengapa ini bukan fitur sudut
MacK
1
Ini harus menjadi jawabannya . OP minta "pake ng-repeat like for". Ini berarti memiliki semua implementasi secara langsung dalam view, tanpa "bantuan" dari controller. Solusi ini melakukan persis seperti itu ... dan sangat pintar untuk boot.
karfus
Bagus, tetapi tidak berfungsi pada semua versi sudut. Saya menggunakan 1.2.9 dan itu tidak didukung:Error: [$parse:isecfld]
Emaborsa
50

Anda dapat menggunakan metode slice pada objek array javascript

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

Pendek dan manis

Gihan
sumber
2
kenapa salah ?. Berhasil. Mari kita ambil skenario lain, jika Anda menginginkan elemen array dari 2 hingga 4 dari indeks array. Apakah ini berfungsi dengan filter limitTo?
Gihan
4
Ini tidak salah, itu tidak semudahitem in items|limitTo:4
CENT1PEDE
1
Ini menambahkan fungsionalitas yang bisa saya tampilkan item 1-4, lalu klik tombol untuk mengubah .slice (0,4) menjadi .slice (5,8), memungkinkan paginator sederhana. Terima kasih!
BaneStar007
39

di html:

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

dan di pengontrol:

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

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

EDIT:

dengan angularjs> 1.2.x

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>
mpm
sumber
19
pilihan lain: t in [1,2,3,4]atau t in 'aaaa' dll :)
Valentyn Shybanov
4
Tampaknya aneh bahwa Angular tidak dapat mendukung loop matematika tanpa memerlukan fungsi untuk mendukungnya.
Guido Anselmi
4
Ya, saya bisa membayangkan harus mengulang 30x, menulisnya seperti [1,2,3,4].. Solusi yang menyedihkan yang satu ini
Matej
2
Lihat jawaban di bawah oleh DavidLin untuk solusi yang lebih baik.
SamHuckaby
@SamHuckaby masalah iterasi pada range.limitTo tidak berguna dalam kasus itu. Ini bukan tentang mengiterasi sekumpulan nilai yang memiliki arti tersendiri, ini mengiterasi 4 kali misalnya. Bukan 4 kali pada potongan array yang ada, hanya 4 kali. sama seperti di coffeescript saat Anda membuat potongan adhoc, seperti "[0..4]", Anda tidak terlalu peduli dengan nilai sebenarnya, hanya saja Anda akan mengulangi operasi 4 kali.
mpm
13

Jawaban yang diberikan oleh @mpm tidak berfungsi, itu memberikan kesalahan

Duplikat di repeater tidak diperbolehkan. Gunakan ekspresi 'track by' untuk menentukan kunci unik. Repeater: {0}, Kunci duplikat: {1}

Untuk menghindari ini bersama

ng-repeat = "t di getTimes (4)"

menggunakan

melacak dengan $ index

seperti ini

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

Pratik Goenka
sumber
teknik saya bekerja dengan versi angularjs yang saya gunakan. Cukup periksa plunkr, saya akan memperbaruinya secepatnya.
mpm
10

Untuk mengulang 7 kali, cobalah untuk menggunakan sebuah array dengan panjang = 7 , maka melacak itu oleh $ index :

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

b=[]buat Array kosong «b»,
.length=7atur ukurannya ke «7»,
&&bbiarkan Array «b» baru tersedia untuk ng-repeat, di
track by $indexmana «$ index» adalah posisi iterasi.
ng-bind="$index + 1"tampilan mulai dari 1.

Untuk mengulang X kali:
hanya mengganti 7 dengan X .

funnyniko
sumber
Tidak jelas tentang apa yang diberikan jawaban ini yang belum tercakup oleh jawaban yang diterima, atau dua suara yang lebih tinggi.
JamesT
Tidak lebih dari seberapa kuat Angular.
funnyniko
3
Dua jawaban suara yang lebih tinggi tampaknya berasumsi bahwa «item» adalah sebuah array. Yang ini membuat array di tempatnya.
funnyniko
Bagus, itu berhasil. Ini adalah satu-satunya solusi yang benar-benar menjawab pertanyaan OP. Sungguh menakjubkan bahwa ia hanya memiliki sedikit suara. Saya hanya ingin tahu apakah ada solusi yang lebih elegan.
Healforgreen
3

Semua jawaban di sini tampaknya mengasumsikan bahwa item adalah sebuah larik. Namun, di AngularJS, itu mungkin juga menjadi objek. Dalam kasus tersebut, pemfilteran dengan limitTo maupun array.slice tidak akan berfungsi. Sebagai salah satu solusi yang mungkin, Anda dapat mengonversi objek Anda menjadi larik, jika Anda tidak keberatan kehilangan kunci objek. Berikut adalah contoh filter untuk melakukan hal itu:

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

    };
});

Setelah itu adalah sebuah array, gunakan slice atau limitTo, seperti yang dinyatakan dalam jawaban lain.

Per Quested Aronsson
sumber