AngularJS Chapter 6: Loop

เวลาเราจะแสดงข้อมูลที่อยู่ในรูปของอะเรย์ เราจะใช้ Loop เพื่อเป็นการประหยัดโค้ด ในทุกๆภาษาจะมีคำสั่ง Loop เสมอ Angular ก็มีครับ เขาใช้

ng-repeat

ดูตัวอย่างการใช้งาน โปรแกรมนี้จะแสดงลิสต์ที่เราตั้งใจทำในปีใหม่เป็นข้อๆ โดยเราจะเก็บสิ่งที่ตั้งใจทำไว้ในอะเรย์ จากนั้น Loop ออกมาแสดง

ผลลัพธ์เป็นดังนี้

ทีนี้มาแกะโค้ดดูกันทีละส่วน

ตอนแรก include Angular เข้ามาก่อน

จากนั้นสร้าง Controller โดยผมตั้งชื่อมันว่า newYearResolutionListWidget

ได้โปรดท่องให้ขึ้นใจไว้นะครับว่า Angular นั้นจะแบ่งโค้ดออกเป็นก้อนๆภายใต้ชื่อว่า Controller

ใน Controller ของผมผมสร้างตัวแปร lists สำหรับเก็บความตั้งใจประจำปีไว้

เอา Controller ผูกเข้ากับ View แล้ว Loop lists ของเราออกมา

ดูคำสั่ง ng-repeat=”list in lists” ให้ชัดๆ ความหมายของมันก็คือให้ วน