การทำซ้ำ ng-repeat เฉพาะ X ครั้งใน AngularJs

87

ฉันจะใช้ ng-repeat like forใน Javascript ได้อย่างไร

ตัวอย่าง:

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

ฉันต้องการทำซ้ำด้วย ng-repeat 4 ครั้ง แต่ฉันจะทำอย่างไร

javascript angularjs

— Vural
แหล่งที่มา

3

เป็นไปได้ทั้งสอง: คำสั่งมีชื่ออูฐเช่น ngBind คำสั่งสามารถเรียกใช้โดยการแปลชื่อกรณีอูฐเป็นกรณีงูด้วยอักขระพิเศษเหล่านี้:, -, หรือ _ อีกทางหนึ่งคำสั่งสามารถนำหน้าด้วย x- หรือ data- เพื่อให้เป็นไปตามโปรแกรมตรวจสอบ HTML

— asgoth

2

ว้าวทำไมคำตอบผิดมากมายคุณควรใช้ ng-repeat = "item ในรายการ | limitTo: 4"

— Toolkit

มีโอกาสที่เขาจะไม่มีอาร์เรย์ให้ทำซ้ำ พูดเพื่อแสดงดาวในระดับดาว อาจมีช่องสำหรับจำนวนดาวที่คุณต้องการแสดง แต่ไม่สามารถทำซ้ำได้

— nirazul

@Toolkit ... แล้วคืออะไรitems.. ?

— TJ

@TJ stackoverflow.com/a/17736076/631527

— Toolkit

343

Angular มาพร้อมกับ limitTo: limit filter รองรับการ จำกัด x รายการแรกและ x รายการสุดท้าย:

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

— เดวิดลิน
แหล่งที่มา

14

นี่น่าจะเป็นคำตอบเพราะมันยังใช้งานได้กับการวนซ้ำวัตถุในอาร์เรย์ นอกจากนี้ยังมีคุณสมบัติเชิงมุม

— Ashley Coolman

29

นี่เป็นโค้ดที่มีประโยชน์อย่างไม่น่าเชื่อ แต่สิ่งนี้ไม่ตอบสนองคำถามของ OP เขาแค่มองหาวิธีทำซ้ำ n ครั้งและดูเหมือนว่าจะไม่มีวัตถุจริงให้ทำซ้ำ

— SamHuckaby

2

นี่ควรเป็นคำตอบโดยใช้เครื่องมือที่มีให้โดย AngularJS core

— Udo

10

สิ่งนี้ไม่ได้ช่วยแก้ปัญหาได้จริง คุณสมมติว่าเขามีวัตถุชื่อitems

— Batman

1

ไม่ใช่คำตอบที่มีประโยชน์สำหรับคำถามนี้อย่างแท้จริง (ฉัน googled โดยเฉพาะวิธีการวนซ้ำ X ครั้งและไม่ จำกัด X) แต่โค้ดที่มีประโยชน์

— MacK

66

นี่เป็นวิธีแก้ปัญหาที่ง่ายที่สุดที่ฉันคิดได้

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

นี่คือตัวอย่าง Plunker

— จันทราสคาร์
แหล่งที่มา

2

ฉลาดและมีประโยชน์มากโดยไม่ต้องใช้ฟังก์ชันใด ๆ ในคอนโทรลเลอร์ที่นั่งอยู่รอบ ๆ ยังคงงงงันว่าทำไมนี่ไม่ใช่คุณสมบัติเชิงมุม

— MacK

1

นี้ควรจะเป็นคำตอบ OP ขอ "ใช้ ng-repeat like for" ซึ่งหมายความว่ามีการนำไปใช้งานทั้งหมดโดยตรงในมุมมองโดยไม่มี "ความช่วยเหลือ" ใด ๆ จากคอนโทรลเลอร์ วิธีนี้ทำได้อย่างนั้น ... และฉลาดในการบู๊ต

— karfus

ดี แต่ใช้ไม่ได้กับเวอร์ชันเชิงมุมทั้งหมด ฉันใช้ 1.2.9 และไม่รองรับ:Error: [$parse:isecfld]

— Emaborsa

50

คุณสามารถใช้เมธอด slice ในวัตถุอาร์เรย์จาวาสคริปต์

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

สั้น n หวาน

— กีฮาน
แหล่งที่มา

2

ทำไมถึงผิด?. มันได้ผล. ลองใช้สถานการณ์อื่นถ้าคุณต้องการองค์ประกอบอาร์เรย์ตั้งแต่ 2 ถึง 4 จากดัชนีอาร์เรย์ มันทำงานร่วมกับตัวกรอง limitTo หรือไม่?

— Gihan

4

มันไม่ผิดมันไม่ง่ายเหมือนitem in items|limitTo:4

— CENT1PEDE

1

สิ่งนี้เพิ่มฟังก์ชั่นที่ฉันสามารถแสดงรายการ 1-4 จากนั้นคลิกปุ่มเพื่อเปลี่ยน. slice (0,4) เป็น. slice (5,8) ทำให้สามารถแบ่งหน้าได้ง่าย ขอบคุณ!

— BaneStar007

39

ใน html:

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

และในตัวควบคุม:

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

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

แก้ไข:

ด้วย angularjs> 1.2.x

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

— mpm
แหล่งที่มา

19

ตัวเลือกอื่น ๆ : t in [1,2,3,4]หรือt in 'aaaa' อื่น ๆ :)

— Valentyn Shybanov

4

ดูเหมือนจะแปลกที่ Angular ไม่สามารถรองรับการวนซ้ำทางคณิตศาสตร์ได้โดยไม่ต้องใช้ฟังก์ชันเพื่อสำรอง

— Guido Anselmi

4

ใช่ฉันนึกได้ว่าต้องวนซ้ำ 30x เขียนว่า[1,2,3,4].. ช่างเป็นวิธีแก้ปัญหาที่น่าหดหู่ใจอะไรอย่างนี้

— Matej

2

ดูคำตอบด้านล่างของ DavidLin สำหรับวิธีแก้ปัญหาที่ดีกว่า

— SamHuckaby

@SamHuckaby ปัญหากำลังวนซ้ำอยู่ในช่วงลิมิตทูไม่มีประโยชน์ในกรณีนั้น มันไม่ได้เกี่ยวกับการวนซ้ำชุดของค่าที่มีความหมายบางอย่างด้วยตัวมันเอง แต่จะวนซ้ำ 4 ครั้งไม่ใช่ 4 ครั้งในอาร์เรย์ที่มีอยู่เพียง 4 ครั้ง เช่นเดียวกับในกาแฟเมื่อคุณสร้างชิ้นโฆษณาแบบ adhoc เช่น "[0..4]" คุณไม่สนใจค่าจริงมากนักเพียงแค่ทำซ้ำ 4 ครั้ง

— นาทีที่

13

คำตอบที่ระบุโดย @mpm ไม่ทำงานมันทำให้เกิดข้อผิดพลาด

ไม่อนุญาตให้มีการทำซ้ำในตัวทำซ้ำ ใช้นิพจน์ 'track by' เพื่อระบุคีย์เฉพาะ Repeater: {0} คีย์ซ้ำ: {1}

เพื่อหลีกเลี่ยงปัญหานี้ควบคู่ไปด้วย

ng-repeat = "t ใน getTimes (4)"

ใช้

ติดตามโดย $ index

แบบนี้

<div ng-repeat = "t ใน getTimes (4) ติดตามโดย $ index"> TEXT </div>

— ปราทิกโกเอนกา
แหล่งที่มา

เทคนิคของฉันใช้งานได้กับ angularjs เวอร์ชันที่ฉันใช้เพียงตรวจสอบ plunkr ฉันจะอัปเดตโดยเร็ว

— นาทีที่

10

ที่จะทำซ้ำ7ครั้งพยายามที่จะใช้อาร์เรย์ที่มีความยาว = 7แล้วติดตามมันโดย $ ดัชนี :

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

b=[]สร้างอาร์เรย์ว่าง« b »
.length=7ตั้งขนาดเป็น« 7 »
&&bปล่อยให้อาร์เรย์« b »ใหม่พร้อมใช้งานสำหรับ ng-repeat โดย
track by $indexที่« $ index »คือตำแหน่งของการวนซ้ำ
ng-bind="$index + 1"แสดงผลเริ่มต้นที่ 1

ที่จะทำซ้ำXครั้ง
เพียงแค่เปลี่ยน7โดยX

— ตลก
แหล่งที่มา

ไม่ชัดเจนว่าคำตอบนี้ให้อะไรซึ่งยังไม่ครอบคลุมถึงคำตอบที่ยอมรับหรือคะแนนโหวตที่สูงกว่าสองคะแนน

— JamesT

ไม่มีอะไรมากไปกว่า Angular ที่มีประสิทธิภาพ

— funnyniko

3

คำตอบที่ได้รับการโหวตสูงกว่าสองคำตอบดูเหมือนจะถือว่า«รายการ»เป็นอาร์เรย์ อันนี้ทำให้อาร์เรย์เข้าที่

— funnyniko

ทำได้ดีมันได้ผล นี่เป็นทางออกเดียวที่ตอบคำถามของ OP ได้จริง มันน่าทึ่งมากที่มีเพียงไม่กี่โหวต ฉันแค่สงสัยว่ามีวิธีแก้ปัญหาที่หรูหรากว่านี้หรือไม่

— Healforgreen

3

คำตอบทั้งหมดที่นี่ดูเหมือนจะถือว่ารายการเป็นอาร์เรย์ อย่างไรก็ตามใน AngularJS อาจเป็นวัตถุเช่นกัน ในกรณีนั้นการกรองด้วย limitTo หรือ array.slice จะไม่ทำงาน วิธีหนึ่งที่เป็นไปได้คือคุณสามารถแปลงวัตถุของคุณเป็นอาร์เรย์ได้หากคุณไม่รังเกียจที่จะทำคีย์วัตถุหาย นี่คือตัวอย่างของตัวกรองที่ต้องทำ:

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

    };
});

เมื่อเป็นอาร์เรย์แล้วให้ใช้ slice หรือ limitTo ตามที่ระบุไว้ในคำตอบอื่น ๆ

— ต่อ Aronsson ที่แสวงหา
แหล่งที่มา