Angularjs Table
Директива NG-Repeat может отлично отображать таблицы.
Отображать данные в таблице
Это очень легко использовать угловой для отображения таблиц:
AngularJs Extance
<! 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> <body> <div ng-pp = "myapp" ng-controller = "customsctrl"> <table> <tr ng-repeat = "x in names"> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> var app = Angular. []); App.controller ('customsctrl', function ($ scope, $ http) {$ http.get ("/try/angularjs/data/custry_json.php") .success (function (response) {$ scope.names = response.records;}); </script> </htobope> </htmls;};Результаты работы:
| Альфредс Футтеркист | Германия |
| Ana Trujillo Emparedados y Holdos | Мексика |
| Антонио Морено Такерия | Мексика |
| Вокруг рога | Великобритания |
| B напитки | Великобритания |
| Berglunds Snabbköp | Швеция |
| Блауэр См. Деликатесен | Германия |
| Blondel père et fils | Франция |
| Bólido Comidas Sdepas | Испания |
| Bon App ' | Франция |
| Рынок в нижней долей | Канада |
| Кактус comidas para llevar | Аргентина |
| Centro Comercial Moctezuma | Мексика |
| Чоп-суюи китайцы | Швейцария |
| Comércio mineiro | Бразилия |
Использование стилей CSS
Чтобы сделать страницу более красивой, мы можем использовать CSS на странице:
Стиль CSS
</style> </head> <body> <div ng-app = "myApp" ng-controller = "customsctrl"> <table> <tr ng-repeat = "x в именах"> <td> {{x.name}} </td> <td> {x.country}} </td> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </td> <td> {x.counttr 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>Результаты работы:
| Альфредс Футтеркист | Германия |
| Ana Trujillo Emparedados y Holdos | Мексика |
| Антонио Морено Такерия | Мексика |
| Вокруг рога | Великобритания |
| B напитки | Великобритания |
| Berglunds Snabbköp | Швеция |
| Блауэр См. Деликатесен | Германия |
| Blondel père et fils | Франция |
| Bólido Comidas Sdepas | Испания |
| Bon App ' | Франция |
| Рынок в нижней долей | Канада |
| Кактус comidas para llevar | Аргентина |
| Centro Comercial Moctezuma | Мексика |
| Чоп-суюи китайцы | Швейцария |
| Comércio mineiro | Бразилия |
Используйте фильтр заказов
Сортировать дисплей, вы можете использовать фильтр OrderBy:
AngularJs Extance
<! 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> Table, Th, td {граница: 1px Solid; пограничный коллапс: коллапс; Надо: 5px;} таблица Tr: nth-child (ODD) {фоновый цветореал: #f1f1f1;} таблица Tr: nth-child (даже) {фоновый цвет: #ffffff;} </style> </head> <body> <div ng-app = "myApp" ng-controller = "custryctrl"> <table> <tr ng-rrepe = "in ingbeat =" in ng-repet = " 'Country' "> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> <script> var app = angular.module ('myApp', []); $ http.get ("/try/angularjs/data/custry_json.php") .success (function (response) {$ scope.names = response.records;});}); </script> </body> </html>;Эффект бега:
| Кактус comidas para llevar | Аргентина |
| Comércio mineiro | Бразилия |
| Рынок в нижней долей | Канада |
| Blondel père et fils | Франция |
| Bon App ' | Франция |
| Альфредс Футтеркист | Германия |
| Блауэр См. Деликатесен | Германия |
| Ana Trujillo Emparedados y Holdos | Мексика |
| Антонио Морено Такерия | Мексика |
| Centro Comercial Moctezuma | Мексика |
| Bólido Comidas Sdepas | Испания |
| Berglunds Snabbköp | Швеция |
| Чоп-суюи китайцы | Швейцария |
| Вокруг рога | Великобритания |
| B напитки | Великобритания |
Используйте прописхитный фильтр
Используйте фильтр верхнего заглая, чтобы преобразовать в прописные:
AngularJs Extance
<! 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> Table, Th, td {граница: 1px Solid; пограничный коллапс: коллапс; Надо: 5px;} таблица Tr: nth-child (ODD) {фоновый цвет: #f1f1f1;} table tr: nth-child (даже) {фоновый цвет: #ffffff;} </style> </head> <body> <div ng-app = "myApp" ng-controller = "custryctrl"> <table> <tr ng-rup <td> {{x.name}} </td> <td> {{x.country | Верхишер}} </td> </tr> </table> </div> <script> var app = angular.module ('myApp', []); app.controller ('customerctrl', function ($ scope, $ http) {$ http.get ("/try/angularjs/data_json.php". {$ scope.names = response.records;});}); </script> </body> </html>Эффект бега:
| Альфредс Футтеркист | ГЕРМАНИЯ |
| Ana Trujillo Emparedados y Holdos | МЕКСИКА |
| Антонио Морено Такерия | МЕКСИКА |
| Вокруг рога | Великобритания |
| B напитки | Великобритания |
| Berglunds Snabbköp | ШВЕЦИЯ |
| Блауэр См. Деликатесен | ГЕРМАНИЯ |
| Blondel père et fils | ФРАНЦИЯ |
| Bólido Comidas Sdepas | ИСПАНИЯ |
| Bon App ' | ФРАНЦИЯ |
| Рынок в нижней долей | КАНАДА |
| Кактус comidas para llevar | АРГЕНТИНА |
| Centro Comercial Moctezuma | МЕКСИКА |
| Чоп-суюи китайцы | ШВЕЙЦАРИЯ |
| Comércio mineiro | БРАЗИЛИЯ |
Отображать серийный номер ($ index)
Серийный номер отображения таблицы можно добавить $ index в <TD>:
AngularJs Extance
<! 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> Table, Th, td {граница: 1px Solid; пограничный коллапс: коллапс; Надо: 5px;} таблица Tr: nth-child (ODD) {фоновый цвет: #f1f1f1;} table tr: nth-child (даже) {фоновый цвет: #ffffff;} </style> </head> <body> <div ng-app = "myApp" ng-controller = "custryctrl"> <table> <tr ng-rup <td> {{$ index + 1}} </td> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> <script> var app = angular.module ('myApp', []); Function ($ scope, $ http) {$ http.get ("/try/angularjs/data/custry_json.php") .success (function (response) {$ scope.names = response.records;});}); </script> </body> </html>Эффект бега:
| 1 | Альфредс Футтеркист | Германия |
| 2 | Ana Trujillo Emparedados y Holdos | Мексика |
| 3 | Антонио Морено Такерия | Мексика |
| 4 | Вокруг рога | Великобритания |
| 5 | B напитки | Великобритания |
| 6 | Berglunds Snabbköp | Швеция |
| 7 | Блауэр См. Деликатесен | Германия |
| 8 | Blondel père et fils | Франция |
| 9 | Bólido Comidas Sdepas | Испания |
| 10 | Bon App ' | Франция |
| 11 | Рынок в нижней долей | Канада |
| 12 | Кактус comidas para llevar | Аргентина |
| 13 | Centro Comercial Moctezuma | Мексика |
| 14 | Чоп-суюи китайцы | Швейцария |
| 15 | Comércio mineiro | Бразилия |
Используйте $ ровно и $ add
AngularJs Extance
<! 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> table, td {граница: 1px Solid; пограничный коллапс: коллапс; Подкладка: 5px;} </style> </head> <body> <div ng-app = "myApp" ng-controller = "custryctrl"> <table> <tr ng-repeat = "x в именах"> <td ng-if = "$ add" ng-if = "$ evel"> {{x.name}} </td> <td ng-if = "$ add" style = "founal-color:#f1f1f1"> {{x.country}} </td> <td ng-if = "$ evel"> {{x.country}} </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </tr> </table> </div> <script> var app = angular.module ('myApp', []); app.controller ('customentsctrl', function ($ scope, $ http) {$ http.get ("/try/angularjs/data_json.php"). response.records;});}); </script> </body> </html>Эффект бега:
| Альфредс Футтеркист | Германия |
| Ana Trujillo Emparedados y Holdos | Мексика |
| Антонио Морено Такерия | Мексика |
| Вокруг рога | Великобритания |
| B напитки | Великобритания |
| Berglunds Snabbköp | Швеция |
| Блауэр См. Деликатесен | Германия |
| Blondel père et fils | Франция |
| Bólido Comidas Sdepas | Испания |
| Bon App ' | Франция |
| Рынок в нижней долей | Канада |
| Кактус comidas para llevar | Аргентина |
| Centro Comercial Moctezuma | Мексика |
| Чоп-суюи китайцы | Швейцария |
| Comércio mineiro | Бразилия |
Выше приведено сборник материалов AngularJS, и мы будем продолжать добавлять их позже. Я надеюсь, что это может помочь нуждающимся студентам.