جدول AngularJS
يمكن لتوجيه NG-Repeat عرض الجداول تمامًا.
عرض البيانات في الجدول
من السهل جدًا استخدام Angular لعرض الجداول:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "clientsctrl"> <table> <tr ng-repeat = "x in names"> <td> {{x.name}} </td> <td> {{x.country}} </td> </td> </div> <script> var app = []]نتائج التشغيل:
| ألفريدز فوتتركيست | ألمانيا |
| Ana Trujillo emparedados y Held | المكسيك |
| أنطونيو مورينو تاوريا | المكسيك |
| حول القرن | المملكة المتحدة |
| مشروبات ب | المملكة المتحدة |
| Berglunds snabbköp | السويد |
| بلوير انظر Delikatessen | ألمانيا |
| شقراء père et fils | فرنسا |
| Bólido Comidas Wreparedas | إسبانيا |
| تطبيق بون | فرنسا |
| تسويق الدولار السفلي | كندا |
| Cactus Comidas Para Llevar | الأرجنتين |
| Centro comercial moctezuma | المكسيك |
| Chop-Suey الصينية | سويسرا |
| Comércio Mineiro | البرازيل |
باستخدام أنماط CSS
لجعل الصفحة أكثر جمالا ، يمكننا استخدام CSS في الصفحة:
نمط CSS
</style> </head> <body> <div ng-app = "myapp" ng-controller = "clientsctrl"> <table> <tr ng-repeat = "x in names"> <td> {{x.name}} </td> <td> {x.country}}} Angular.Module ('myapp' ، []) ؛ app.controller ('clientsctrl' ، function ($ scope ، $ http) {$ http.get ("http://www.runoob.com/try/angularjs/data/customers_json.php") استجابة. records ؛}) ؛}) ؛ </script> </body> </html>نتائج التشغيل:
| ألفريدز فوتتركيست | ألمانيا |
| Ana Trujillo emparedados y Held | المكسيك |
| أنطونيو مورينو تاوريا | المكسيك |
| حول القرن | المملكة المتحدة |
| مشروبات ب | المملكة المتحدة |
| Berglunds snabbköp | السويد |
| بلوير انظر Delikatessen | ألمانيا |
| شقراء père et fils | فرنسا |
| Bólido Comidas Wreparedas | إسبانيا |
| تطبيق بون | فرنسا |
| تسويق الدولار السفلي | كندا |
| Cactus Comidas Para Llevar | الأرجنتين |
| Centro comercial moctezuma | المكسيك |
| Chop-Suey الصينية | سويسرا |
| Comércio Mineiro | البرازيل |
استخدم مرشح Orderby
فرز العرض ، يمكنك استخدام مرشح Orderby:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <style> ، td {الحدود: حدود الحدود: الانهيار. Padding: 5px ؛} Table Tr: nth-child (odd) {background-color: #f1f1f1 ؛} tram tr: nth-child (old) {background-color: #ffffff ؛} </style> </head> <body> <div ng-app = "myapp" 'country' "> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </lood> </viv> <script> var app = angular.module ('myapp' ، [] $ http.get ("/try/AngularJS/data/customer_json.php") .Scecess (function (response) {$ scope.names = response.records ؛}) ؛تأثير الجري:
| Cactus Comidas Para Llevar | الأرجنتين |
| Comércio Mineiro | البرازيل |
| تسويق الدولار السفلي | كندا |
| شقراء père et fils | فرنسا |
| تطبيق بون | فرنسا |
| ألفريدز فوتتركيست | ألمانيا |
| بلوير انظر Delikatessen | ألمانيا |
| Ana Trujillo emparedados y Held | المكسيك |
| أنطونيو مورينو تاوريا | المكسيك |
| Centro comercial moctezuma | المكسيك |
| Bólido Comidas Wreparedas | إسبانيا |
| Berglunds snabbköp | السويد |
| Chop-Suey الصينية | سويسرا |
| حول القرن | المملكة المتحدة |
| مشروبات ب | المملكة المتحدة |
استخدم مرشح الأحرف الكبيرة
استخدم مرشح الأحرف الكبيرة للتحويل إلى أحرف كبيرة:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <style> ، td {الحدود: حدود الحدود: الانهيار. Padding: 5px ؛} Table Tr: nth-child (Odd) {background-color: #f1f1f1 ؛} tram tr: nth-child (old) {background-color: #ffffff ؛} </style> </head> <td> {{x.name}} </td> <td> {{x.country | Expercase}}} </td> </tr> </table> </viv> <script> var app = Angular.module ('myapp' ، []) ؛ app.controller ('clientsctrl' ، function ($ scope ، $ http) {$ http.get ("/try/cholularjs/data/fluard_json. {$ scope.names = response.Records ؛}) ؛}) ؛ </script> </body> </html>تأثير الجري:
| ألفريدز فوتتركيست | ألمانيا |
| Ana Trujillo emparedados y Held | المكسيك |
| أنطونيو مورينو تاوريا | المكسيك |
| حول القرن | المملكة المتحدة |
| مشروبات ب | المملكة المتحدة |
| Berglunds snabbköp | السويد |
| بلوير انظر Delikatessen | ألمانيا |
| شقراء père et fils | فرنسا |
| Bólido Comidas Wreparedas | إسبانيا |
| تطبيق بون | فرنسا |
| تسويق الدولار السفلي | كندا |
| Cactus Comidas Para Llevar | الأرجنتين |
| Centro comercial moctezuma | المكسيك |
| Chop-Suey الصينية | سويسرا |
| Comércio Mineiro | البرازيل |
عرض الرقم التسلسلي (فهرس $)
يمكن إضافة الرقم التسلسلي لعرض الجدول $ index في <td>:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <style> ، td {الحدود: حدود الحدود: الانهيار. Padding: 5px ؛} Table Tr: nth-child (Odd) {background-color: #f1f1f1 ؛} tram tr: nth-child (old) {background-color: #ffffff ؛} </style> </head> <td> {{$ index + 1}} </td> <td> {{x.name}} </td> <td> {{x.country}} </td> </td> </tabl> </viv> <script> var app = nogular.module ('myapp' ، []) الوظيفة (Scope $ ، $ http) {$ http.get ("/try/AngularJS/data/customer_json.php") .sccess (function (response) {$ scope.names = response.Records ؛}) ؛}) ؛ </script> </html>تأثير الجري:
| 1 | ألفريدز فوتتركيست | ألمانيا |
| 2 | Ana Trujillo emparedados y Held | المكسيك |
| 3 | أنطونيو مورينو تاوريا | المكسيك |
| 4 | حول القرن | المملكة المتحدة |
| 5 | مشروبات ب | المملكة المتحدة |
| 6 | Berglunds snabbköp | السويد |
| 7 | بلوير انظر Delikatessen | ألمانيا |
| 8 | شقراء père et fils | فرنسا |
| 9 | Bólido Comidas Wreparedas | إسبانيا |
| 10 | تطبيق بون | فرنسا |
| 11 | تسويق الدولار السفلي | كندا |
| 12 | Cactus Comidas Para Llevar | الأرجنتين |
| 13 | Centro comercial moctezuma | المكسيك |
| 14 | Chop-Suey الصينية | سويسرا |
| 15 | Comércio Mineiro | البرازيل |
استخدم $ و $ ODD
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js حدود الحدود: الانهيار. Padding: 5px ؛} </style> </head> <body> <div ng-app = "myapp" ng-controller = "clientsctrl"> <tabl ng-if = "$ حتى"> {{x.name}}} </td> <td ng-if = "$ odd" style = "background-color:#f1f1f1"> {{x.country}} </td> <td ng-if = "$ oll" </tr> </lood> </viv> <script> var app = Angular.Module ('myapp' ، []) ؛ app.controller ('clientsctrl' ، function ($ scope ، $ http) {$ http.get ("/try/AngularJs/data/failure_json.php") استجابة. records ؛}) ؛}) ؛ </script> </body> </html>تأثير الجري:
| ألفريدز فوتتركيست | ألمانيا |
| Ana Trujillo emparedados y Held | المكسيك |
| أنطونيو مورينو تاوريا | المكسيك |
| حول القرن | المملكة المتحدة |
| مشروبات ب | المملكة المتحدة |
| Berglunds snabbköp | السويد |
| بلوير انظر Delikatessen | ألمانيا |
| شقراء père et fils | فرنسا |
| Bólido Comidas Wreparedas | إسبانيا |
| تطبيق بون | فرنسا |
| تسويق الدولار السفلي | كندا |
| Cactus Comidas Para Llevar | الأرجنتين |
| Centro comercial moctezuma | المكسيك |
| Chop-Suey الصينية | سويسرا |
| Comércio Mineiro | البرازيل |
ما سبق هو عبارة عن مجموعة من مواد شكل AngularJS ، وسنستمر في إضافتها لاحقًا. آمل أن يساعد الطلاب المحتاجين.