AngularJSテーブル
NG-Reepeatディレクティブは、テーブルを完全に表示できます。
テーブルにデータを表示します
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"> </script> </head> <table> <tr ng-repeat = "x in names"> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> <スクリプト> var app = angular.module（ 'my'、[] $ http）{$ http.get（ "/try/angularjs/data/customers_json.php"）.success（function（response）{$ scope.names = response.records;}）;}）; </script> </body> </html>実行結果：
| Alfreds futterkiste | ドイツ |
| Ana Trujillo Emparedados y Heldos | メキシコ |
| アントニオ・モレノ・タケリア | メキシコ |
| ホーンの周り | 英国 |
| Bの飲み物 | 英国 |
| BerglundsSnabbköp | スウェーデン |
| BlauerはDelikatessenを参照してください | ドイツ |
| BlondelPèreetFils | フランス |
| ボリド・コミダの準備 | スペイン |
| ボンアプリ ' | フランス |
| ボトムドラーマーケット | カナダ |
| サボテンコミダパラルバル | アルゼンチン |
| Centro Comercial Moctezuma | メキシコ |
| チョップスーイー中国語 | スイス |
| ComércioMineiro | ブラジル |
CSSスタイルを使用します
ページをより美しくするために、ページでCSSを使用できます。
CSSスタイル
</style> </head> <body> <div ng-app = "myapp" ng-controller = "customerctrl"> <table> <tr ng-repeat = "x in names"> <td> {{x.name}} </td> <td> {{x.country}}}} </td> </tr> </> </table> Angular.Module（ 'myApp'、[]）; app.Controller（ 'ComstutyCtrl'、function（$ scope、$ http）{$ http.get（ "http://www.runoob.com/try/angularjs/data/customers_json.php"）.suckess（scope.nams）。 Response.Records;}）;}）; </script> </body> </html>実行結果：
| Alfreds futterkiste | ドイツ |
| Ana Trujillo Emparedados y Heldos | メキシコ |
| アントニオ・モレノ・タケリア | メキシコ |
| ホーンの周り | 英国 |
| Bの飲み物 | 英国 |
| BerglundsSnabbköp | スウェーデン |
| BlauerはDelikatessenを参照してください | ドイツ |
| BlondelPèreetFils | フランス |
| ボリド・コミダの準備 | スペイン |
| ボンアプリ ' | フランス |
| ボトムドラーマーケット | カナダ |
| サボテンコミダパラルバル | アルゼンチン |
| Centro Comercial Moctezuma | メキシコ |
| チョップスーイー中国語 | スイス |
| ComércioMineiro | ブラジル |
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 {border：1px sol gray;国境崩壊：崩壊;パディング：5px;}テーブルTr：nth-child（odd）{background-color：＃f1f1f1;}テーブルTr：nth-child（veven）{background-color：#ffffff;} </style> </head> <body> <body> <body> <div ng-app = "myapp" ng-controler = "customerctrl"> <trid <tr <tr <trim 'Country' ""> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> <script> var app = angular.module.module（ 'myApp'、[]）; app.controller（ 'customerctrl'、（ 'customerctrl'） $ http.get（ "/try/angularjs/data/customers_json.php"）.success（function（response）{$ scope.names = respons. restords;}）;}）; </script> </body> </html>ランニング効果：
| サボテンコミダパラルバル | アルゼンチン |
| ComércioMineiro | ブラジル |
| ボトムドラーマーケット | カナダ |
| BlondelPèreetFils | フランス |
| ボンアプリ ' | フランス |
| Alfreds futterkiste | ドイツ |
| BlauerはDelikatessenを参照してください | ドイツ |
| Ana Trujillo Emparedados y Heldos | メキシコ |
| アントニオ・モレノ・タケリア | メキシコ |
| Centro Comercial Moctezuma | メキシコ |
| ボリド・コミダの準備 | スペイン |
| BerglundsSnabbkö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"> </script> <style>、td {border：1px sol gray;国境崩壊：崩壊;パディング：5px;}テーブルTr：nth-child（odd）{background-color：＃f1f1f1;}テーブルTr：nth-child（veven）{background-color：#ffffff;} </style> </head> <body> <body> <body> <div ng-app = "myapp" ng-controler = "customerctrl"> <tr <tr <> <td> {{x.name}} </td> <td> {{x.country |大文字}} </td> </tr> </table> </div> <scrip> var app = angular.module（ 'myApp'、[]）; app.Controller（ 'ComstutyCtrl'、function（$ scope、$ http）{$ http.get（ "/try/angularjs/and data/customer_json.php" "） {$ scope.names = response.records;}）;}）; </script> </body> </html>ランニング効果：
| Alfreds futterkiste | ドイツ |
| Ana Trujillo Emparedados y Heldos | メキシコ |
| アントニオ・モレノ・タケリア | メキシコ |
| ホーンの周り | 英国 |
| Bの飲み物 | 英国 |
| BerglundsSnabbköp | スウェーデン |
| BlauerはDelikatessenを参照してください | ドイツ |
| BlondelPèreetFils | フランス |
| ボリド・コミダの準備 | スペイン |
| ボンアプリ ' | フランス |
| ボトムドラーマーケット | カナダ |
| サボテンコミダパラルバル | アルゼンチン |
| Centro Comercial Moctezuma | メキシコ |
| チョップスーイー中国語 | スイス |
| ComércioMineiro | ブラジル |
シリアル番号（$ index）を表示
テーブルディスプレイのシリアル番号は、<td>に$ indexを追加できます。
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 {border：1px sol gray;国境崩壊：崩壊;パディング：5px;}テーブルTr：nth-child（odd）{background-color：＃f1f1f1;}テーブルTr：nth-child（veven）{background-color：#ffffff;} </style> </head> <body> <body> <body> <div ng-app = "myapp" ng-controler = "customerctrl"> <tr <tr <> <td> {{$ index + 1}} </td> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr </table> </div> <script> var app = angular.module（ 'myapp.contrl' 'constrorer（' contruler（ $ http）{$ http.get（ "/try/angularjs/data/customers_json.php"）.success（function（response）{$ scope.names = response.records;}）;}）; </script> </body> </html>ランニング効果：
| 1 | Alfreds futterkiste | ドイツ |
| 2 | Ana Trujillo Emparedados y Heldos | メキシコ |
| 3 | アントニオ・モレノ・タケリア | メキシコ |
| 4 | ホーンの周り | 英国 |
| 5 | Bの飲み物 | 英国 |
| 6 | BerglundsSnabbköp | スウェーデン |
| 7 | BlauerはDelikatessenを参照してください | ドイツ |
| 8 | BlondelPèreetFils | フランス |
| 9 | ボリド・コミダの準備 | スペイン |
| 10 | ボンアプリ ' | フランス |
| 11 | ボトムドラーマーケット | カナダ |
| 12 | サボテンコミダパラルバル | アルゼンチン |
| 13 | Centro Comercial Moctezuma | メキシコ |
| 14 | チョップスーイー中国語 | スイス |
| 15 | ComércioMineiro | ブラジル |
$均一で$奇数を使用します
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> <スタイル>国境崩壊：崩壊;パディング：5px;} </style> </head> <body> <div ng-app = "myApp" ng-controller = "customerctrl"> <table> <tr ng-repeat = "in names"> <if = "$ od" style = "background-color：＃f1f1f1"> {x.name} </td </td </td < ng-if = "$ ven"> {{x.name}} </td> <td ng-if = "$ odd" style = "background-color：＃f1f1f1"> {{x.country}} </td> <td ng-if = "$"> {{x.country}} </td> </tr> </table> </div> <scrip> var app = angular.module（ 'myApp'、[]）; app.Controller（ 'customerSctrl'、function（$ scope、$ http）{$ http.get（ "/try/angularjs/data/customer_json.php"）。 Response.Records;}）;}）; </script> </body> </html>ランニング効果：
| Alfreds futterkiste | ドイツ |
| Ana Trujillo Emparedados y Heldos | メキシコ |
| アントニオ・モレノ・タケリア | メキシコ |
| ホーンの周り | 英国 |
| Bの飲み物 | 英国 |
| BerglundsSnabbköp | スウェーデン |
| BlauerはDelikatessenを参照してください | ドイツ |
| BlondelPèreetFils | フランス |
| ボリド・コミダの準備 | スペイン |
| ボンアプリ ' | フランス |
| ボトムドラーマーケット | カナダ |
| サボテンコミダパラルバル | アルゼンチン |
| Centro Comercial Moctezuma | メキシコ |
| チョップスーイー中国語 | スイス |
| ComércioMineiro | ブラジル |
上記は、Angularjsフォームの素材の編集であり、後で追加し続けます。困っている学生に役立つことを願っています。