ข้อมูลหมวดหมู่มักจะซ้ำ ๆ ในธรรมชาติ คำสั่ง NG-repeat สามารถใช้ในการวาดตารางได้อย่างง่ายดาย ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้คำสั่ง NG-repeat เพื่อวาดตาราง
<table> <tr> <th> ชื่อ </th> <th> เครื่องหมาย </th> </tr> <tr ng-repeat = "หัวเรื่องในนักเรียน. subjects"> <td> {{subject.name}} </td> <td> {{subject.markตารางสามารถจัดสไตล์โดยใช้สไตล์ CSS ดังต่อไปนี้:
<style> Table, TH, TD {Border: 1px Solid Grey; การล่มสลายของชายแดน: การล่มสลาย; Padding: 5px;} ตาราง tr: nth-child (คี่) {พื้นหลังสี: #f2f2f2;} ตาราง tr: nth-child (แม้) {พื้นหลังสี: #ffffff;} </style>ตัวอย่าง
ตัวอย่างต่อไปนี้จะแสดงคำแนะนำทั้งหมดข้างต้น
testangularjs.html
<html> <head> <title> ตาราง JS Angular </title> <style> ตาราง, th, td {border: 1px solid grey; การล่มสลายของชายแดน: การล่มสลาย; Padding: 5px;} ตาราง tr: nth-child (คี่) {พื้นหลังสี: #f2f2f2;} ตาราง tr: nth-child (แม้) {พื้นหลัง-สี: #ffffff;} </style> </head> <body> <h2> แอปพลิเคชันตัวอย่าง ng-controller = "studentcontroller"> <table> <tr> <td> ป้อนชื่อแรก: </td> <td> <อินพุต type = "text" ng-model = "student.firstname"> </td> </tr> <td> <td> ป้อนชื่อสุดท้าย: </td> <td> ng-model = "student.lastname"> </td> </tr> <tr> <td> ชื่อ: </td> <td> {{student.fullname ()}} </td> </tr> <td> ng-repeat = "subject in student.subjects"> <td> {{subject.name}} </td> <td> {{subject.marks}} </td> </tr> </table> </tr> LastName: "Parashar", ค่าธรรมเนียม: 500, วิชา: [{ชื่อ: 'ฟิสิกส์', เครื่องหมาย: 70}, {ชื่อ: 'เคมี', เครื่องหมาย: 80}, {ชื่อ: 'คณิตศาสตร์', เครื่องหมาย: 65}, {ชื่อ: 'ภาษาอังกฤษ' studentObject = $ scope.student; ส่งคืน StudentObject.firstName + "" + studentObject.lastName; }};} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>เอาท์พุท
เปิด textangularjs.html ในเว็บเบราว์เซอร์และดูผลลัพธ์ต่อไปนี้:
ข้างต้นคือการรวบรวมความรู้พื้นฐานของตาราง AngularJS เราจะยังคงแยกแยะความรู้ที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!