Home / Developer  / Angularjs  / AngularJS การแยก Controller และทำงานร่วมกับ Table

AngularJS การแยก Controller และทำงานร่วมกับ Table

บทเรียน AngularJS กับการทำ ng-repeat ร่วมกับ HTML Tag table หรือ ตารางครับโดยบทเรียนนี้จะเป็นการกำหนด Controller เป็นไฟล์ Javascript ที่เรียกภายนอกครับ

ศึกษาบทเรียนก่อนหน้านี้

ตัวอย่างรอบนี้เราจะทำงานร่วมกับ Structure ภาษา HTML ของ <table> หรือตารางครับ โดยตัวอย่างเป็นดังนี้

โดย Tag HTML ของ <tr><th> คือส่วนแถวของหัวตาราง และ <tr><td> คือส่วนของแถวข้อมูลที่จะแสดงครับ

สร้างไฟล์ HTML ใหม่ชื่อว่า index.html ครับ ทำการประกาศชื่อ app ด้วย ng-app ก่อนครับ ผมตั้งชื่อว่า “tableApp” ที่ Tag <html>

นั่นก็แปลว่าเราต้องตั้งชื่อ Controller ของเราว่า “tableApp” ชื่อเดียวกันครับ ให้เราสร้างไฟล์ Javascript ขึ้นมาใหม่ชื่อ tableApp.js ครับ เขียนดังนี้

โดยมีชื่อ module ว่า “tableApp” และจะเขียนร่วมกับ index.html ส่วนของ HTML ผ่าน ng-controller ที่ชื่อว่า UITableView ครับ

ไฟล์ index.html ต้องเป็นตามนี้ครับ

ทดสอบครับ

Screen Shot 2558-07-09 at 12.14.09 AM

เป็นอันเรียบร้อย และเราสามารถใช้ Filter จากบทเรียนก่อนหน้ามาช่วยได้นะครับ

(อ่านที่:AngularJS กับการวนซ้ำข้อมูลด้วย ng-repeat และกรองด้วย Filte)

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.