ตาราง Angularjs
คำสั่ง NG-Repeat สามารถแสดงตารางได้อย่างสมบูรณ์แบบ
แสดงข้อมูลในตาราง
มันง่ายมากที่จะใช้เชิงมุมเพื่อแสดงตาราง:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" <bable> <tr ng-repeat = "x ในชื่อ"> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> $ http) {$ http.get ("/try/angularjs/data/comvery_json.php") .success (ฟังก์ชั่น (การตอบสนอง) {$ scope.names = response.records;});}); </script> </body>ผลการทำงาน:
| Alfreds Futterkiste | ประเทศเยอรมนี |
| ana trujillo emparedados y heldos | เม็กซิโก |
| Antonio Moreno Taquería | เม็กซิโก |
| รอบ ๆ เขา | สหราชอาณาจักร |
| เครื่องดื่มของ B | สหราชอาณาจักร |
| Berglunds Snabbköp | สวีเดน |
| Blauer ดู Delikatessen | ประเทศเยอรมนี |
| Blondel Père et fils | ฝรั่งเศส |
| Bólido comidas prechedas | สเปน |
| แอพ Bon ' | ฝรั่งเศส |
| ตลาดดอลลาร์ด้านล่าง | แคนาดา |
| Cactus comidas para llevar | อาร์เจนตินา |
| centro comercial moctezuma | เม็กซิโก |
| สับจีน | สวิตเซอร์แลนด์ |
| Comércio Mineiro | บราซิล |
ใช้สไตล์ CSS
เพื่อให้หน้าสวยงามยิ่งขึ้นเราสามารถใช้ CSS ในหน้า:
สไตล์ CSS
</style> </head> <body> <div ng-app = "myapp" ng-controller = "comveryctionctrl"> <blem> <tr ng-repeat = "x ในชื่อ"> <td> {{x.name}} </td> <td> {{x.country Angular.module ('myapp', []); app.controller ('customerctrl', ฟังก์ชั่น ($ scope, $ http) {$ http.get ("http://www.runoob.com/try/angularjs/data/customers_json.php. Response.Records;});}); </script> </body> </html>ผลการทำงาน:
| Alfreds Futterkiste | ประเทศเยอรมนี |
| ana trujillo emparedados y heldos | เม็กซิโก |
| Antonio Moreno Taquería | เม็กซิโก |
| รอบ ๆ เขา | สหราชอาณาจักร |
| เครื่องดื่มของ B | สหราชอาณาจักร |
| Berglunds Snabbköp | สวีเดน |
| Blauer ดู Delikatessen | ประเทศเยอรมนี |
| Blondel Père et fils | ฝรั่งเศส |
| Bólido comidas prechedas | สเปน |
| แอพ Bon ' | ฝรั่งเศส |
| ตลาดดอลลาร์ด้านล่าง | แคนาดา |
| Cactus comidas para llevar | อาร์เจนตินา |
| centro comercial moctezuma | เม็กซิโก |
| สับจีน | สวิตเซอร์แลนด์ |
| Comércio Mineiro | บราซิล |
ใช้ตัวกรองคำสั่งซื้อ
จัดเรียงการแสดงผลคุณสามารถใช้ตัวกรอง 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" การล่มสลายของชายแดน: การล่มสลาย; Padding: 5px;} ตาราง tr: nth-child (คี่) {พื้นหลัง-สี: #f1f1f1;} ตาราง tr: nth-child (แม้) {พื้นหลัง-สี: #ffffff;} </style> </head> <body> <body> <body> <body> 'Country' "> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> <script> var app = angular.module $ http.get ("/try/angularjs/data/comvery_json.php") .success (ฟังก์ชั่น (การตอบสนอง) {$ scope.names = response.records;});}); </script> </body>เอฟเฟกต์การทำงาน:
| Cactus comidas para llevar | อาร์เจนตินา |
| Comércio Mineiro | บราซิล |
| ตลาดดอลลาร์ด้านล่าง | แคนาดา |
| Blondel Père et fils | ฝรั่งเศส |
| แอพ Bon ' | ฝรั่งเศส |
| Alfreds Futterkiste | ประเทศเยอรมนี |
| Blauer ดู Delikatessen | ประเทศเยอรมนี |
| ana trujillo emparedados y heldos | เม็กซิโก |
| Antonio Moreno Taquería | เม็กซิโก |
| centro comercial moctezuma | เม็กซิโก |
| Bólido comidas prechedas | สเปน |
| Berglunds Snabbköp | สวีเดน |
| สับจีน | สวิตเซอร์แลนด์ |
| รอบ ๆ เขา | สหราชอาณาจักร |
| เครื่องดื่มของ B | สหราชอาณาจักร |
ใช้ตัวกรองตัวพิมพ์ใหญ่
ใช้ตัวกรองตัวพิมพ์ใหญ่เพื่อแปลงเป็นตัวพิมพ์ใหญ่:
อินสแตนซ์ 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;} ตาราง tr: nth-child (คี่) {พื้นหลัง-สี: #f1f1f1;} ตาราง tr: nth-child (แม้) {พื้นหลัง-สี: #ffffff;} </style> </head> <body> <body> <body> <td> {{x.name}} </td> <td> {{x.country | uppercase}} </td> </tr> </table> </div> <script> var app = angular.module ('myapp', []); app.controller ('customerctrl', ฟังก์ชั่น ($ scope, $ http) {$ http.get ( {$ spope.names = response.records;});}); </script> </body> </html>เอฟเฟกต์การทำงาน:
| Alfreds Futterkiste | ประเทศเยอรมนี |
| ana trujillo emparedados y heldos | เม็กซิโก |
| Antonio Moreno Taquería | เม็กซิโก |
| รอบ ๆ เขา | สหราชอาณาจักร |
| เครื่องดื่มของ B | สหราชอาณาจักร |
| Berglunds Snabbköp | สวีเดน |
| Blauer ดู Delikatessen | ประเทศเยอรมนี |
| Blondel Père et fils | ฝรั่งเศส |
| Bólido comidas prechedas | สเปน |
| แอพ Bon ' | ฝรั่งเศส |
| ตลาดดอลลาร์ด้านล่าง | แคนาดา |
| Cactus comidas para llevar | อาร์เจนตินา |
| centro comercial moctezuma | เม็กซิโก |
| สับจีน | สวิตเซอร์แลนด์ |
| 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" การล่มสลายของชายแดน: การล่มสลาย; Padding: 5px;} ตาราง tr: nth-child (คี่) {พื้นหลัง-สี: #f1f1f1;} ตาราง tr: nth-child (แม้) {พื้นหลัง-สี: #ffffff;} </style> </head> <body> <body> <body> <td> {{$ index + 1}} </td> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </tboler> $ http) {$ http.get ("/try/angularjs/data/comvery_json.php") .success (ฟังก์ชั่น (การตอบสนอง) {$ scope.names = response.records;});}); </script> </body>เอฟเฟกต์การทำงาน:
| 1 | Alfreds Futterkiste | ประเทศเยอรมนี |
| 2 | ana trujillo emparedados y heldos | เม็กซิโก |
| 3 | Antonio Moreno Taquería | เม็กซิโก |
| 4 | รอบ ๆ เขา | สหราชอาณาจักร |
| 5 | เครื่องดื่มของ B | สหราชอาณาจักร |
| 6 | Berglunds Snabbköp | สวีเดน |
| 7 | Blauer ดู Delikatessen | ประเทศเยอรมนี |
| 8 | Blondel Père et fils | ฝรั่งเศส |
| 9 | Bólido comidas prechedas | สเปน |
| 10 | แอพ Bon ' | ฝรั่งเศส |
| 11 | ตลาดดอลลาร์ด้านล่าง | แคนาดา |
| 12 | Cactus comidas para llevar | อาร์เจนตินา |
| 13 | centro comercial moctezuma | เม็กซิโก |
| 14 | สับจีน | สวิตเซอร์แลนด์ |
| 15 | Comércio Mineiro | บราซิล |
ใช้ $ even และ $ แปลก
อินสแตนซ์ 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 = "comentionsctrl"> <table> <tr ng-repeat = "x ในชื่อ"> <td ng-if = "$ ord" ng-if = "$ even"> {{x.name}} </td> <td ng-if = "$ owd" style = "พื้นหลังสี:#f1f1f1"> {x.country}} </td> <td ng-if = "$ even"> </tr> </table> </div> <script> var app = angular.module ('myapp', []); app.controller ('comverycidectrl', ฟังก์ชั่น ($ scope, $ http) {$ http.get ("/try/angularjs/data/data/data Response.Records;});}); </script> </body> </html>เอฟเฟกต์การทำงาน:
| Alfreds Futterkiste | ประเทศเยอรมนี |
| ana trujillo emparedados y heldos | เม็กซิโก |
| Antonio Moreno Taquería | เม็กซิโก |
| รอบ ๆ เขา | สหราชอาณาจักร |
| เครื่องดื่มของ B | สหราชอาณาจักร |
| Berglunds Snabbköp | สวีเดน |
| Blauer ดู Delikatessen | ประเทศเยอรมนี |
| Blondel Père et fils | ฝรั่งเศส |
| Bólido comidas prechedas | สเปน |
| แอพ Bon ' | ฝรั่งเศส |
| ตลาดดอลลาร์ด้านล่าง | แคนาดา |
| Cactus comidas para llevar | อาร์เจนตินา |
| centro comercial moctezuma | เม็กซิโก |
| สับจีน | สวิตเซอร์แลนด์ |
| Comércio Mineiro | บราซิล |
ข้างต้นเป็นการรวบรวมวัสดุฟอร์ม AngularJS และเราจะเพิ่มพวกเขาในภายหลัง ฉันหวังว่ามันจะช่วยนักเรียนที่ต้องการความช่วยเหลือ