คำถามติดแท็ก angularjs-ng-repeat

คำสั่ง "ngRepeat" สร้างอินสแตนซ์เทมเพลตหนึ่งครั้งต่อรายการจากคอลเล็กชัน อินสแตนซ์เทมเพลตแต่ละรายการมีขอบเขตของตัวเองโดยที่ตัวแปรลูปที่กำหนดจะถูกตั้งค่าเป็นรายการคอลเลกชันปัจจุบันและ "$ index" ถูกตั้งค่าเป็นดัชนีหรือคีย์รายการ

9
จะวนซ้ำคีย์และค่าด้วย ng-repeat ใน AngularJS ได้อย่างไร
ในตัวควบคุมของฉันฉันมีข้อมูลเช่น: $scope.object = data jsonตอนนี้ข้อมูลนี้เป็นพจนานุกรมที่มีคีย์และค่าจาก ฉันสามารถเข้าถึงแอททริบิวด้วยobject.nameในเทมเพลต มีวิธีใดบ้างที่ฉันสามารถทำซ้ำปุ่มมากกว่านี้และแสดงในตารางเช่น <tr><td> {{key}} </td> <td> data.key </td> ข้อมูลเป็นเช่นนี้ { "id": 2, "project": "wewe2012", "date": "2013-02-26", "description": "ewew", "eet_no": "ewew", }

26
วิธีการ ng-repeat จำนวนครั้งที่กำหนดแทนการทำซ้ำในอาร์เรย์?
มีวิธีในการ ng-repeatการจำนวนครั้งที่กำหนดแทนที่จะต้องย้ำมากกว่าอาร์เรย์? ตัวอย่างเช่นด้านล่างฉันต้องการให้รายการแสดงขึ้น 5 เท่าโดยสมมติว่า$scope.numberเท่ากับ 5 นอกจากนี้การเพิ่มจำนวนดังนั้นแต่ละรายการจะเพิ่มขึ้นเช่น 1, 2, 3, 4, 5 ผลลัพธ์ที่ต้องการ: <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>

8
orderBy หลายสาขาในเชิงมุม
วิธีการจัดเรียงโดยใช้หลายฟิลด์ในเวลาเดียวกันเป็นมุม? กำปั้นตามกลุ่มแล้วโดยกลุ่มย่อยสำหรับตัวอย่าง $scope.divisions = [{'group':1,'sub':1}, {'group':2,'sub':10}, {'group':1,'sub':2},{'group':1,'sub':20},{'group':2,'sub':1}, {'group':2,'sub':11}]; ฉันต้องการแสดงสิ่งนี้เป็น กลุ่ม: กลุ่มย่อย 1 - 1 1 - 2 1 - 20 2 - 1 2 - 10 2 - 11 <select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:'group' | orderBy:'sub'" />

10
AngularJS ng-repeat จัดการรายการที่ว่างเปล่า
ฉันคิดว่านี่จะเป็นสิ่งที่ธรรมดามาก แต่ฉันไม่สามารถหาวิธีจัดการกับมันได้ใน AngularJS สมมติว่าฉันมีรายการกิจกรรมและต้องการส่งออกด้วย AngularJS แล้วมันค่อนข้างง่าย: <ul> <li ng-repeat="event in events">{{event.title}}</li> </ul> แต่ฉันจะจัดการกรณีได้อย่างไรเมื่อรายการว่างเปล่า? ฉันต้องการให้กล่องข้อความอยู่ในตำแหน่งที่รายการอยู่กับบางสิ่งเช่น "ไม่มีเหตุการณ์" หรือคล้ายกัน สิ่งเดียวที่จะเข้ามาใกล้คือng-switchด้วยevents.length(ฉันจะตรวจสอบว่าว่างเปล่าเมื่อวัตถุและไม่ใช่อาร์เรย์ได้อย่างไร) แต่นั่นเป็นตัวเลือกเดียวที่ฉันมีจริงหรือ

6
ผ่าน 2 $ index index ภายใน ng-repeat ที่ซ้อนกัน
ดังนั้นฉันจึงมี ng-repeat ซ้อนกันภายใน ng-repeat อื่นเพื่อสร้างเมนู nav ในแต่ละ<li>วงวนซ้ำภายในฉันตั้งค่า ng-click ซึ่งเรียกตัวควบคุมที่เกี่ยวข้องสำหรับรายการเมนูนั้นโดยการผ่านดัชนี $ เพื่อให้แอปทราบว่าเราต้องการอะไร อย่างไรก็ตามฉันจำเป็นต้องผ่านในดัชนี $ จากนอก ng-repeat เพื่อให้แอปรู้ว่าเราอยู่ในส่วนใดรวมถึงบทแนะนำที่สอนด้วย <ul ng-repeat="section in sections"> <li class="section_title {{section.active}}" > {{section.name}} </li> <ul> <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($index)" ng-repeat="tutorial in section.tutorials"> {{tutorial.name}} </li> </ul> </ul> นี่คือ Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

4
จะใช้ ng-repeat สำหรับพจนานุกรมใน AngularJs ได้อย่างไร?
ฉันรู้ว่าเราสามารถใช้ซ้ำ ngสำหรับวัตถุหรืออาร์เรย์ json เช่น: <div ng-repeat="user in users"></div> แต่เราจะใช้ ng-repeat สำหรับพจนานุกรมได้อย่างไร: var users = null; users["182982"] = "{...json-object...}"; users["198784"] = "{...json-object...}"; users["119827"] = "{...json-object...}"; ฉันต้องการใช้กับพจนานุกรมผู้ใช้: <div ng-repeat="user in users"></div> เป็นไปได้ไหม?. ถ้าใช่ฉันจะทำใน AngularJs ได้อย่างไร ตัวอย่างสำหรับคำถามของฉัน: ใน C # เรากำหนดพจนานุกรมเช่น: Dictionary<key,value> dict = new Dictionary<key,value>(); //and then we can search for values, …

24
AngularJS สำหรับลูปที่มีตัวเลขและช่วง
Angular ให้การสนับสนุนสำหรับลูปโดยใช้ตัวเลขภายในคำสั่ง HTML: <div data-ng-repeat="i in [1,2,3,4,5]"> do something </div> แต่ถ้าตัวแปรขอบเขตของคุณมีช่วงที่มีจำนวนแบบไดนามิกคุณจะต้องสร้างอาร์เรย์ว่างในแต่ละครั้ง ในการควบคุม var range = []; for(var i=0;i<total;i++) { range.push(i); } $scope.range = range; ในรูปแบบ HTML <div data-ng-repeat="i in range"> do something </div> ใช้งานได้ แต่ไม่จำเป็นเนื่องจากเราจะไม่ใช้อาร์เรย์ช่วงเลยในลูป ไม่มีใครรู้ว่าการตั้งค่าช่วงหรือปกติสำหรับค่าต่ำสุด / สูงสุด? สิ่งที่ต้องการ: <div data-ng-repeat="i in 1 .. 100"> do something </div>

17
เชิงมุม ng-repeat ในสิ่งที่ตรงกันข้าม
ฉันจะรับอาเรย์กลับด้านเป็นมุมได้อย่างไร? ฉันพยายามใช้ตัวกรอง orderBy แต่ต้องมีเพรดิเคต (เช่น 'ชื่อ') เพื่อจัดเรียง: <tr ng-repeat="friend in friends | orderBy:'name':true"> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> <td>{{friend.age}}</td> <tr> มีวิธีการย้อนกลับอาร์เรย์เดิมโดยไม่ต้องเรียงลำดับ เช่นนั้น: <tr ng-repeat="friend in friends | orderBy:'':true"> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> <td>{{friend.age}}</td> <tr>

6
เข้าถึงดัชนีของผู้ปกครองซ้ำซ้ำจากเด็กเอ็นจีซ้ำ
ฉันต้องการใช้ดัชนีของรายการหลัก (foos) เป็นอาร์กิวเมนต์สำหรับการเรียกใช้ฟังก์ชันในรายการลูก (foos.bars) ผมพบว่าการโพสต์ที่มีคนแนะนำให้ใช้ $ ปกครอง. ดัชนี $ แต่ไม่ได้เป็นทรัพย์สินของ$index$parent ฉันจะเข้าถึงดัชนีของผู้ปกครองได้ng-repeatอย่างไร <div ng-repeat="f in foos"> <div> <div ng-repeat="b in foos.bars"> <a ng-click="addSomething($parent.$index)">Add Something</a> </div> </div> </div>

15
เหตุการณ์เสร็จสิ้นการทำซ้ำ ng
ฉันต้องการเรียกฟังก์ชั่น jQuery กำหนดเป้าหมาย div ด้วยตาราง ng-repeatตารางที่เป็นประชากรที่มี เมื่อฉันเรียกมันว่า $(document).ready() ฉันไม่มีผลลัพธ์ ด้วย $scope.$on('$viewContentLoaded', myFunc); ไม่ช่วย มีวิธีการดำเนินการฟังก์ชั่นใด ๆ หลังจากที่ประชากรซ้ำซ้อนเสร็จสมบูรณ์? ฉันได้อ่านคำแนะนำเกี่ยวกับการใช้งานที่กำหนดเองdirectiveแล้ว แต่ฉันไม่รู้ว่าจะใช้งานอย่างไรกับ ng-repeat และ div ของฉัน ...

9
การใช้เครื่องหมายจุลภาคเป็นตัวคั่นรายการกับ AngularJS
ฉันต้องการสร้างรายการที่คั่นด้วยเครื่องหมายจุลภาค: <li ng-repeat="friend in friends"> <b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>... </li> ตามเอกสารของ AngularJS ไม่อนุญาตให้ใช้คำสั่งการควบคุมการไหลในนิพจน์ นี่คือเหตุผลที่ฉัน{{$last ? '' : ', '}}ไม่ทำงาน มีวิธีอื่นในการสร้างรายการที่คั่นด้วยเครื่องหมายจุลภาคหรือไม่ แก้ไข 1 มีสิ่งที่ง่ายกว่า: <span ng-show="!$last">, </span>

10
รักษาตัวแบ่งบรรทัดในเชิงมุม
ฉันได้เห็นนี้คำถาม SO รหัสของฉันแทนที่จะng-bind="item.desc"ใช้{{item.desc}}เพราะฉันมีng-repeatมาก่อน ดังนั้นรหัสของฉัน: <div ng-repeat="item in items"> {{item.description}} </div> คำอธิบายรายการมี\nการขึ้นบรรทัดใหม่ซึ่งไม่ได้แสดงผล การ{{item.description}}แสดงขึ้นบรรทัดใหม่สามารถอนุมานได้อย่างง่ายดายว่าฉันมีng-repeatข้างต้นอย่างไร

12
วิธีปรับปรุงประสิทธิภาพของ ngRepeat ผ่านชุดข้อมูลขนาดใหญ่ (angular.js)
ฉันมีชุดข้อมูลขนาดใหญ่หลายพันแถวโดยมีฟิลด์ประมาณ 10 ฟิลด์แต่ละแห่งมีข้อมูลประมาณ 2MB ฉันต้องแสดงมันในเบราว์เซอร์ วิธีการที่ตรงไปตรงมาส่วนใหญ่ (ดึงข้อมูลใส่เข้าไป$scopeให้ng-repeat=""งานทำ) ทำงานได้ดี แต่จะหยุดเบราว์เซอร์ประมาณครึ่งนาทีเมื่อมันเริ่มแทรกโหนดใน DOM ฉันจะแก้ไขปัญหานี้ได้อย่างไร ทางเลือกหนึ่งคือการผนวกแถวเป็นส่วน$scopeเพิ่มและรอngRepeatให้แทรกก้อนอันหนึ่งเข้าไปใน DOM ให้เสร็จก่อนที่จะย้ายไปยังแถวถัดไป แต่ AFAIK ngRepeat จะไม่รายงานกลับเมื่อเสร็จสิ้น "การทำซ้ำ" ดังนั้นมันจะน่าเกลียด ตัวเลือกอื่นคือการแบ่งข้อมูลบนเซิร์ฟเวอร์ออกเป็นหน้าต่างๆและดึงข้อมูลออกมาในหลาย ๆ คำร้องขอ ฉันดูเอกสารเชิงมุมในการค้นหาสิ่งที่ต้องการng-repeat="data in dataset" ng-repeat-steps="500"แต่ไม่พบอะไรเลย ฉันค่อนข้างใหม่กับวิธีการเชิงมุมดังนั้นจึงเป็นไปได้ที่ฉันจะพลาดจุดนี้อย่างสมบูรณ์ แนวปฏิบัติที่ดีที่สุดในเรื่องนี้คืออะไร?

20
วิธีการกรองหลายค่า (หรือการดำเนินการ) ใน angularJS
ฉันต้องการใช้filterในเชิงมุมและต้องการกรองหลายค่าหากมีค่าใดค่าหนึ่งก็ควรจะแสดง ฉันมีตัวอย่างโครงสร้างนี้: วัตถุmovieซึ่งมีคุณสมบัติgenresและผมต้องการที่จะกรองและActionComedy ฉันรู้ว่าทำได้filter:({genres: 'Action'} || {genres: 'Comedy'})แต่จะทำอย่างไรถ้าฉันต้องการกรองแบบไดนามิก เช่นfilter: variableX ฉันจะตั้งค่าvariableXใน$scopeเมื่อฉันมีอาร์เรย์ของประเภทที่ฉันต้องกรองได้อย่างไร ฉันสามารถสร้างมันเป็นสตริงแล้วทำeval()แต่ฉันไม่ต้องการใช้ eval () ...

2
AngularJS - ฉันจะอ้างอิงชื่อคุณสมบัติภายใน ng-Repeat ได้อย่างไร
นอกเหนือจากการแสดงค่าของคุณสมบัติในออบเจ็กต์แล้วฉันยังต้องการแสดงชื่อคุณสมบัติเป็นป้ายกำกับด้วย มีวิธีทำด้วยng-repeatหรือไม่? ตัวอย่างเช่น: <ul> <li ng-repeat="option in data">{{propertyName}}: {{option}}</li> </ul> ซึ่งอาจคายสิ่งนี้ออกมา: <ul> <li>Name: John</li> <li>Phone: (123) 456-7890</li> <li>Country: England</li> </ul>

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.