عادة ما تكون بيانات الفئة متكررة في الطبيعة. يمكن استخدام توجيه NG-Repeat لرسم الجداول بسهولة. يوضح المثال التالي باستخدام توجيه NG-Repeat لرسم جدول.
<Table> <tr> <th> name </h> <th> علامات </th> </tr> <tr ng-repeat = "tource in student.subjects"> <td> {{thision.name}}} </td> <td>يمكن تصميم الجداول باستخدام أنماط CSS ، على النحو التالي:
<Style> الجدول ، th ، td {الحدود: 1px رمادي الصلب ؛ حدود الحدود: الانهيار. Padding: 5px ؛} Table Tr: nth-child (Odd) {background-color: #f2f2f2 ؛} table tr: nth-child (حتى) {background-color: #fffff ؛} </style>مثال
ستظهر الأمثلة التالية جميع الإرشادات المذكورة أعلاه.
testangularjs.html
<html> <head> <title> table js table </title> <style> table ، th ، td {border: 1px solid gray ؛ حدود الحدود: الانهيار. Padding: 5px ؛} Table Tr: nth-child (Odd) {background-color: #f2f2f2 ؛} tram tr: nth-child (حتى) {خلفية اللون: #ffffff ؛} </style> </head> <body> <h2> تطبيق عينة AngularJS </h2> <div ng- app = " ng-controller = "studentController"> <table> <tr> <td> أدخل الاسم الأول: </td> <td> <type type = "text" ng-model = "student.lastname"> </td> </tr> <tr> <td> الاسم: </td> <td> ng-repeat = "الموضوع في student.subjects"> <td> {{thision.name}} </td> <td> {{thision.marks}} </td> </tr> </tabl> </tr> </table> </viv> <cript> اسم العائلة: "parashar" ، الرسوم: 500 ، الموضوعات: [{name: 'Physics' ، Marks: 70} ، {name: 'Chemistry' ، Marks: 80} ، {name: 'Math' ، marks: 65} ، {name: englege '، marks: 75} ، {name:' hindi '، 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. سوف نستمر في فرز المعرفة ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!